文件名修改
This commit is contained in:
parent
860ce21b52
commit
6c969df959
@ -44,13 +44,7 @@ export function useHomePage() {
|
|||||||
goods_id: '3',
|
goods_id: '3',
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
// const noticeBarList = ref<noticeBarItem[]>([
|
|
||||||
// {
|
|
||||||
// id: 1,
|
|
||||||
// title: '智慧',
|
|
||||||
// content: '公告公告公告公告公告',
|
|
||||||
// },
|
|
||||||
// ])
|
|
||||||
const noticeBarList = ref<string[]>([
|
const noticeBarList = ref<string[]>([
|
||||||
'公告公告公告公告公告1111111',
|
'公告公告公告公告公告1111111',
|
||||||
'智慧关务系统升级通知',
|
'智慧关务系统升级通知',
|
||||||
@ -92,13 +86,12 @@ export function useHomePage() {
|
|||||||
showError: false,
|
showError: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
// ==================== 页面初始化 ====================
|
//页面初始化
|
||||||
const initPage = async () => {
|
const initPage = async () => {
|
||||||
try {
|
try {
|
||||||
await Promise.all([fetchHomeIndex().then(res=>{
|
await Promise.all([fetchHomeIndex().then(res => {
|
||||||
if(res.code == 1){
|
if (res.code == 1) {
|
||||||
homeData.value = res.data
|
homeData.value = res.data
|
||||||
console.log(homeData.value)
|
|
||||||
}
|
}
|
||||||
})])
|
})])
|
||||||
// 在这里赋值或者获取接口返回的数据
|
// 在这里赋值或者获取接口返回的数据
|
||||||
@ -107,14 +100,14 @@ export function useHomePage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 刷新处理 ====================
|
// 刷新处理
|
||||||
const onRefresh = async () => {
|
const onRefresh = async () => {
|
||||||
await handleRefresh(async () => {
|
await handleRefresh(async () => {
|
||||||
await initPage()
|
await initPage()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 加载更多处理 ====================
|
// 加载更多
|
||||||
const onLoadMore = async () => {
|
const onLoadMore = async () => {
|
||||||
await handleLoadMore(async () => {
|
await handleLoadMore(async () => {
|
||||||
// 这里可以加载更多数据
|
// 这里可以加载更多数据
|
||||||
@ -122,7 +115,7 @@ export function useHomePage() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 返回数据和方法 ====================
|
// 返回数据和方法
|
||||||
return {
|
return {
|
||||||
// 背景样式
|
// 背景样式
|
||||||
backgroundStyle,
|
backgroundStyle,
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"pages": [{
|
"pages": [{
|
||||||
"path": "pages/index/index",
|
"path": "pages/home/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "首页",
|
"navigationBarTitleText": "首页",
|
||||||
// #ifdef WEB
|
// #ifdef WEB
|
||||||
@ -80,7 +80,7 @@
|
|||||||
"borderStyle": "white",
|
"borderStyle": "white",
|
||||||
"list": [{
|
"list": [{
|
||||||
"text": "首页",
|
"text": "首页",
|
||||||
"pagePath": "pages/index/index",
|
"pagePath": "pages/home/index",
|
||||||
"iconPath": "/static/tabs/home_default.png",
|
"iconPath": "/static/tabs/home_default.png",
|
||||||
"selectedIconPath": "/static/tabs/home_selected.png"
|
"selectedIconPath": "/static/tabs/home_selected.png"
|
||||||
},
|
},
|
||||||
@ -119,7 +119,7 @@
|
|||||||
},
|
},
|
||||||
// company企业相关分包
|
// company企业相关分包
|
||||||
{
|
{
|
||||||
"root": "pageCompany",
|
"root": "pagesCompany",
|
||||||
"pages": [{
|
"pages": [{
|
||||||
"path": "pages/companyPortrait/index",
|
"path": "pages/companyPortrait/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@ -1,90 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { fullUrl } from '@/utils/common'
|
|
||||||
import type { categoryPanelItem } from '@/types/home'
|
|
||||||
import { pageUrl } from '@/utils/constants'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
list: categoryPanelItem[]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const change = (event: UniHelper.UniGridOnChangeEvent) => {
|
|
||||||
uni.setStorageSync('activeCategoryIndex', event.detail.index)
|
|
||||||
uni.switchTab({
|
|
||||||
url: pageUrl['category'],
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const groupedCategoryList = computed(() => {
|
|
||||||
if (!props.list) return []
|
|
||||||
const chunkSize = 5
|
|
||||||
const groups = []
|
|
||||||
for (let i = 0; i < props.list.length; i += chunkSize) {
|
|
||||||
groups.push(props.list.slice(i, i + chunkSize))
|
|
||||||
}
|
|
||||||
return groups
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<swiper class="swiper" :indicator-dots="true" v-if="props.list.length > 0">
|
|
||||||
<swiper-item v-for="(group, groupIndex) in groupedCategoryList" :key="groupIndex">
|
|
||||||
<uni-grid :column="5" :highlight="true" @change="change" :showBorder="false" :square="false">
|
|
||||||
<uni-grid-item v-for="(item, index) in group" :index="index" :key="index">
|
|
||||||
<view class="grid-item-box">
|
|
||||||
<image :src="fullUrl(item.icon)" class="image" mode="aspectFill" />
|
|
||||||
<text class="text">{{ item.name }}</text>
|
|
||||||
</view>
|
|
||||||
</uni-grid-item>
|
|
||||||
</uni-grid>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.swiper {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
width: 75rpx;
|
|
||||||
height: 75rpx;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 24rpx;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-dynamic-box {
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item-box {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10rpx 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item-box-row {
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10rpx 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-dot {
|
|
||||||
position: absolute;
|
|
||||||
top: 5rpx;
|
|
||||||
right: 15rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper {
|
|
||||||
height: 190rpx;
|
|
||||||
margin-top: 15rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,137 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type { hotRecommendItem } from '@/types/home'
|
|
||||||
import { fullUrl } from '@/utils/common'
|
|
||||||
import { pageUrl } from '@/utils/constants'
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
list: hotRecommendItem[]
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
list: () => [],
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
// 跳转
|
|
||||||
const jumpTo = (item: hotRecommendItem) => {
|
|
||||||
if (item.goods_id) {
|
|
||||||
return uni.navigateTo({
|
|
||||||
url: `${pageUrl['goods-detail']}?id=${item.goods_id}`,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (item.classify_id) {
|
|
||||||
return uni.navigateTo({
|
|
||||||
url: `${pageUrl['goods-list']}?classify_id=${item.classify_id}`,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<view v-if="props.list.length > 0" class="recommend">
|
|
||||||
<uni-section title="热卖推荐" type="line">
|
|
||||||
<view class="section">
|
|
||||||
<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
|
|
||||||
<uni-grid-item v-for="(item, index) in props.list" :key="index">
|
|
||||||
<view class="grid-item" @tap="jumpTo(item)">
|
|
||||||
<view class="titles">
|
|
||||||
<text class="title ellipsis">{{ item.title }}</text>
|
|
||||||
<text class="sub-title ellipsis">{{ item.sub_title }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="content">
|
|
||||||
<view class="tag-container">
|
|
||||||
<view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
|
|
||||||
<text>{{ tag }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
<image class="image" :src="fullUrl(item.image)"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</uni-grid-item>
|
|
||||||
</uni-grid>
|
|
||||||
</view>
|
|
||||||
</uni-section>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.recommend {
|
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item {
|
|
||||||
margin: 0rpx 5rpx 10rpx;
|
|
||||||
padding: 0rpx 10rpx;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.titles {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-bottom: 20rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-title {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #666;
|
|
||||||
min-height: 35rpx;
|
|
||||||
line-height: 40rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.tag-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 5rpx;
|
|
||||||
}
|
|
||||||
.tag {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5rpx 15rpx;
|
|
||||||
font-size: 20rpx;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #ff6347;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
border: none;
|
|
||||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
||||||
height: 40rpx;
|
|
||||||
max-width: 150rpx;
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
text {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
width: 150rpx;
|
|
||||||
height: 150rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ellipsis {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 1;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { pageUrl } from '@/utils/constants'
|
|
||||||
|
|
||||||
type list = {
|
|
||||||
title: string
|
|
||||||
content: string
|
|
||||||
}[]
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
list: list
|
|
||||||
color?: string
|
|
||||||
bgColor?: string
|
|
||||||
switchTime?: number
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
list: () => [],
|
|
||||||
color: '#000',
|
|
||||||
bgColor: '#fff',
|
|
||||||
switchTime: 3,
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
const showContent = (content: string) => {
|
|
||||||
if (!content) return
|
|
||||||
content = encodeURIComponent(content)
|
|
||||||
uni.navigateTo({ url: `${pageUrl['rich-text']}?title=消息公告&content=${content}` })
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<view v-if="props.list.length > 0" style="margin-top: 20rpx">
|
|
||||||
<view class="notice-box" :style="'background-color: ' + bgColor + ';'">
|
|
||||||
<view class="notice-icon">
|
|
||||||
<image src="/static/images/notice_bar.png" style="width: 200rpx" />
|
|
||||||
</view>
|
|
||||||
<scroll-view class="notice-content">
|
|
||||||
<swiper
|
|
||||||
class="swiper"
|
|
||||||
:autoplay="true"
|
|
||||||
:interval="switchTime * 1000"
|
|
||||||
:duration="1500"
|
|
||||||
:circular="true"
|
|
||||||
:vertical="true"
|
|
||||||
>
|
|
||||||
<swiper-item v-for="(item, index) in list" :key="index" class="notice-content-item">
|
|
||||||
<view class="swiper-item">
|
|
||||||
<view
|
|
||||||
class="notice-content-item-text-wrapper"
|
|
||||||
:style="'color: ' + color + ';'"
|
|
||||||
@tap="showContent(item.content)"
|
|
||||||
>
|
|
||||||
<text class="notice-content-item-text">{{ item.title }}</text>
|
|
||||||
<text class="icon-right"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.swiper {
|
|
||||||
height: 60rpx !important;
|
|
||||||
padding-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
scroll-view {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.notice-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 60rpx;
|
|
||||||
padding: 0 10rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.notice-icon {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
width: 140rpx;
|
|
||||||
margin-left: 10rpx;
|
|
||||||
}
|
|
||||||
.notice-content {
|
|
||||||
width: calc(100% - 220rpx);
|
|
||||||
position: relative;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.notice-content-item {
|
|
||||||
width: 100%;
|
|
||||||
height: 60rpx;
|
|
||||||
text-align: left;
|
|
||||||
line-height: 60rpx;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.notice-content-item-text-wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notice-content-item-text {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes anotice {
|
|
||||||
0% {
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
30% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
70% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateY(-100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { nextTick, ref } from 'vue'
|
|
||||||
import { getBannerApi, getHotRecommendApi, getNoticeBartApi } from '@/api/home'
|
|
||||||
import type { bannerItem, noticeBarItem } from '@/types/home'
|
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
||||||
import categoryGroup from '@/pages/index/components/categoryGroup.vue'
|
|
||||||
import noticeBar from '@/pages/index/components/notice-bar.vue'
|
|
||||||
import { getTopCategoryApi } from '@/api/catogory'
|
|
||||||
import { useCartStore, useMemberStore } from '@/stores'
|
|
||||||
import { getCartTotalNumApi } from '@/api/cart'
|
|
||||||
import hotRecommend from '@/pages/index/components/hotRecommend.vue'
|
|
||||||
|
|
||||||
//轮播图
|
|
||||||
const bannerList = ref<bannerItem[]>([])
|
|
||||||
const getBannerListData = async () => {
|
|
||||||
const res = await getBannerApi()
|
|
||||||
bannerList.value = res.result
|
|
||||||
}
|
|
||||||
//公告
|
|
||||||
const noticeBarList = ref<noticeBarItem[]>([])
|
|
||||||
const getNoticeBarData = async () => {
|
|
||||||
const res = await getNoticeBartApi()
|
|
||||||
noticeBarList.value = res.result
|
|
||||||
}
|
|
||||||
//分类
|
|
||||||
const categoryList = ref()
|
|
||||||
const getTopCategoryListData = async () => {
|
|
||||||
const res = await getTopCategoryApi()
|
|
||||||
categoryList.value = res.result
|
|
||||||
}
|
|
||||||
//热卖推荐
|
|
||||||
const hotRecommendList = ref()
|
|
||||||
const getHotRecommend = async () => {
|
|
||||||
const res = await getHotRecommendApi()
|
|
||||||
hotRecommendList.value = res.result
|
|
||||||
}
|
|
||||||
//商品列表
|
|
||||||
const shopGoodsListRef = ref()
|
|
||||||
|
|
||||||
const getIndexData = () => {
|
|
||||||
return Promise.all([
|
|
||||||
getBannerListData(),
|
|
||||||
getNoticeBarData(),
|
|
||||||
getTopCategoryListData(),
|
|
||||||
getHotRecommend(),
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
onLoad(() => {
|
|
||||||
getIndexData()
|
|
||||||
// 首页分享
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
uni.showShareMenu({
|
|
||||||
withShareTicket: true,
|
|
||||||
menus: ['shareAppMessage'],
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
})
|
|
||||||
|
|
||||||
onShow(() => {
|
|
||||||
nextTick(() => {
|
|
||||||
shopGoodsListRef.value.refresh()
|
|
||||||
})
|
|
||||||
|
|
||||||
const cartStore = useCartStore()
|
|
||||||
//首页初始化设置购物车角标
|
|
||||||
if (useMemberStore().profile) {
|
|
||||||
getCartTotalNumApi().then((res) => {
|
|
||||||
cartStore.setCartTotalNum(res.result)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
cartStore.setCartTotalNum(0)
|
|
||||||
}
|
|
||||||
cartStore.setCartTabBadge()
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleRefresh = async (status: number) => {
|
|
||||||
//触发刷新状态
|
|
||||||
if (status === 2) {
|
|
||||||
getIndexData()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<shop-goods-list
|
|
||||||
ref="shopGoodsListRef"
|
|
||||||
@refresher-status-changed="handleRefresh"
|
|
||||||
:options="{
|
|
||||||
auto: false,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<template #top>
|
|
||||||
<shop-goods-search />
|
|
||||||
</template>
|
|
||||||
<template #middle>
|
|
||||||
<shop-swiper :list="bannerList" v-if="bannerList" />
|
|
||||||
<noticeBar :list="noticeBarList" />
|
|
||||||
<category-group :list="categoryList" v-if="categoryList" />
|
|
||||||
<hot-recommend :list="hotRecommendList" />
|
|
||||||
<uni-section title="商品列表" type="line"></uni-section>
|
|
||||||
</template>
|
|
||||||
</shop-goods-list>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
page {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
54
src/styles/common.scss
Normal file
54
src/styles/common.scss
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
$primary-color: #4d7eec;
|
||||||
|
$secondary-color: #0478f4;
|
||||||
|
$tertiary-color: #144cec;
|
||||||
|
$else-highlight-color: #426bd2;
|
||||||
|
|
||||||
|
$border-radius: 24rpx;
|
||||||
|
|
||||||
|
$font-family-bold: 'AlimamaShuHeiTi-Bold';
|
||||||
|
$font-family-regular: 'Alibaba-PuHuiTi-R';
|
||||||
|
.flex-col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.flex-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.justify-start {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.justify-center {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-end {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.justify-evenly {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
.justify-around {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.justify-between {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.align-start {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.align-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.align-end {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user