860 lines
20 KiB
Vue
860 lines
20 KiB
Vue
<template>
|
|
<view>
|
|
<view class="my-tabs flex jc-between">
|
|
<view
|
|
v-for="(item,index) in tabs"
|
|
:key="index"
|
|
:class="{
|
|
'active': tabsIndex === index,
|
|
'has-vertical':index < 3
|
|
}"
|
|
class="tab-item flex jc-center ai-center"
|
|
@click="changeTabs(index)"
|
|
>
|
|
{{ item.label }}
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="(tabsIndex === 0 && productList.length> 0) ||
|
|
(tabsIndex === 1 && storeList.length> 0) ||
|
|
(tabsIndex === 2 && videoList.length> 0) ||
|
|
(tabsIndex === 3 && countyFamousList.length> 0)
|
|
"
|
|
>
|
|
<view
|
|
v-if="!isManage"
|
|
class="manage flex jc-end"
|
|
>
|
|
<view class="flex ai-center" @click="changeManage">
|
|
<image
|
|
:src="webUrl+'/20240107224533038041.png'"
|
|
mode="scaleToFill"
|
|
/>
|
|
管理
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-else
|
|
class="manage flex jc-end ai-center"
|
|
style="color:#C41617"
|
|
@click="changeManage"
|
|
>
|
|
<view>退出管理</view>
|
|
</view>
|
|
</view>
|
|
<!--商品列表-->
|
|
<scroll-view
|
|
v-if="tabsIndex === 0"
|
|
:class="{'manage-state': isManage}"
|
|
class="scroll-box"
|
|
:style="{background : productList.length === 0 ? '#f5f5f5' : '#fff !important'}"
|
|
scroll-y
|
|
@scrolltolower="fetchProduct()"
|
|
>
|
|
<view
|
|
v-if="productList.length === 0"
|
|
class="tc no-data"
|
|
>
|
|
<image
|
|
:src="webUrl+'/20240102232718644743.png'"
|
|
mode="scaleToFill"
|
|
class="img"
|
|
/>
|
|
</view>
|
|
<view
|
|
v-for="(item,index) in productList"
|
|
:key="index"
|
|
class="item-commodity flex ai-center"
|
|
>
|
|
<CheckboxIcon
|
|
v-if="isManage"
|
|
:default-state="item['state']"
|
|
:mark="[index]"
|
|
style="margin-right: 16rpx;"
|
|
@change="onChange"
|
|
/>
|
|
<image
|
|
:src="item['image']"
|
|
mode="scaleToFill"
|
|
class="cover flex-0"
|
|
@click="navToGoods(item['productId'])"
|
|
/>
|
|
<view style="width: 100%">
|
|
<view
|
|
class="more-t bold"
|
|
@click="navToGoods(item['productId'])"
|
|
>{{ item['storeName'] }}</view>
|
|
<view class="sub" @click="navToGoods(item['productId'])">规格:{{ item['sku'] }}</view>
|
|
<view class="flex jc-between ai-end">
|
|
<view class="price flex ai-end" @click="navToGoods(item['productId'])">
|
|
<text style="color:#E92727">￥</text>
|
|
<text style="color:#E92727;font-size: 32rpx;line-height: 48rpx">{{ item['price'] }}</text>
|
|
<text style="margin-left: 10rpx;text-decoration:line-through">￥{{ item['otPrice'] }}</text>
|
|
</view>
|
|
<view class="cart flex jc-center ai-center">
|
|
<image :src="webUrl+'/20240107224527293534.png'" mode="scaleToFill" @click="addCart(item)"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!--店铺列表-->
|
|
<scroll-view
|
|
v-if="tabsIndex === 1"
|
|
:class="{'manage-state':isManage}"
|
|
class="scroll-box"
|
|
:style="{background : storeList.length === 0 ? '#f5f5f5' : '#fff !important'}"
|
|
scroll-y
|
|
@scrolltolower="fetchStore()"
|
|
>
|
|
<view
|
|
v-if="storeList.length === 0"
|
|
class="tc no-data"
|
|
>
|
|
<image
|
|
:src="webUrl+'/20240102232718644743.png'"
|
|
mode="scaleToFill"
|
|
class="img"
|
|
/>
|
|
</view>
|
|
<view
|
|
v-for="(item,index) in storeList"
|
|
:key="index"
|
|
class="item-store flex ai-start"
|
|
>
|
|
<view class="flex flex-0 ai-center">
|
|
<CheckboxIcon
|
|
v-if="isManage"
|
|
:default-state="item['state']"
|
|
:mark="[index]"
|
|
style="margin-right: 16rpx;"
|
|
@change="onChange"
|
|
/>
|
|
<image
|
|
:src="item['logo']"
|
|
mode="scaleToFill"
|
|
class="cover"
|
|
/>
|
|
</view>
|
|
<view>
|
|
<view class="flex jc-between ai-start" style="width: 594rpx">
|
|
<view>
|
|
<view class="one-t bold">{{ item['name'] }}</view>
|
|
<view class="sub">{{ item['time'] === '刚刚' ? '刚刚' : item['time'] + '收藏' }}</view>
|
|
</view>
|
|
<view
|
|
:style="{'margin-right':(isManage?48:0)+'rpx'}"
|
|
class="btn-nav flex jc-center ai-center"
|
|
@click="navToStore(item['hotelId'])"
|
|
>
|
|
进店逛逛
|
|
<image
|
|
:src="webUrl+'/20240109234706982937.png'"
|
|
style="width: 24rpx;height: 24rpx"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex jc-start ai-center" style="margin-top: 16rpx;">
|
|
<image
|
|
v-for="(img,i) in item['productImages']"
|
|
:key="i"
|
|
:src="img" mode="scaleToFill"
|
|
class="img-product"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!--视频列表-->
|
|
<scroll-view
|
|
v-if="tabsIndex === 2"
|
|
scroll-y
|
|
:class="{'manage-state':isManage}"
|
|
:style="{background : videoList.length === 0 ? '#f5f5f5' : '#fff !important'}"
|
|
class="scroll-box"
|
|
@scrolltolower="fetchVideo()"
|
|
>
|
|
<view
|
|
v-if="videoList.length === 0"
|
|
class="tc no-data"
|
|
>
|
|
<image
|
|
:src="webUrl+'/20240102232718644743.png'"
|
|
mode="scaleToFill"
|
|
class="img"
|
|
/>
|
|
</view>
|
|
<view class="flex flex-wrap" style="padding:40rpx 32rpx">
|
|
<view
|
|
v-for="(item,index) in videoList"
|
|
:key="index"
|
|
class="item-video"
|
|
>
|
|
<CheckboxIcon
|
|
v-if="isManage"
|
|
:default-state="item['state']"
|
|
:mark="[index]"
|
|
class="video-check"
|
|
@change="onChange"
|
|
/>
|
|
<image
|
|
:src="item['cover']"
|
|
mode="scaleToFill"
|
|
class="img-cover"
|
|
@click="navToVideo(item['videoId'])"
|
|
/>
|
|
<view class="item-mask flex jc-end ai-end">
|
|
<image
|
|
:src="webUrl+'/20240113205505660820.png'"
|
|
mode="scaleToFill"
|
|
class="icon-heart"
|
|
/>
|
|
<text>{{ item['favoriteCount'] }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!--千县店铺列表-->
|
|
<scroll-view
|
|
v-if="tabsIndex === 3"
|
|
:class="{'manage-state':isManage}"
|
|
class="scroll-box county-scroll"
|
|
:style="{background : countyFamousList.length === 0 ? '#f5f5f5' : '#f5f5f5 !important'}"
|
|
scroll-y
|
|
@scrolltolower="fetchCountyFamous()"
|
|
>
|
|
<view
|
|
v-if="countyFamousList.length === 0"
|
|
class="tc no-data"
|
|
>
|
|
<image
|
|
:src="webUrl+'/20240102232718644743.png'"
|
|
mode="scaleToFill"
|
|
class="img"
|
|
/>
|
|
</view>
|
|
<view class="county-list-wrap">
|
|
<view
|
|
v-for="(item, index) in countyFamousList"
|
|
:key="index"
|
|
class="county-item"
|
|
@click="gotoQianxianShop(item)"
|
|
>
|
|
<view class="img-wrap">
|
|
<CheckboxIcon
|
|
v-if="isManage"
|
|
:default-state="item['state']"
|
|
:mark="[index]"
|
|
class="check"
|
|
@change="onChange"
|
|
/>
|
|
<image
|
|
:src="item.cover + (item.coverType === 1 ? '' : '?vframe/jpg/offset/1')"
|
|
mode="scaleToFill"
|
|
class="cover"
|
|
/>
|
|
</view>
|
|
<view class="county-info">
|
|
<view class="name one-t">
|
|
{{ item.name }}
|
|
</view>
|
|
<view class="intro more-t">
|
|
{{ item.shopIntro }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="fixed-manage flex jc-between ai-center" v-if="isManage">
|
|
<view style="margin-left: 30rpx;">
|
|
<CheckboxIcon
|
|
:default-state="isAll"
|
|
:mark="[-1]"
|
|
style="margin-right: 16rpx;"
|
|
@change="onChange"
|
|
/>
|
|
<text style="color:#666666;font-size: 32rpx">全选({{ selectCount }})</text>
|
|
</view>
|
|
<view class="flex ai-center">
|
|
<view class="btn flex jc-center ai-center" style="background: #D5D7D8" @click="changeManage">返回</view>
|
|
<view class="btn flex jc-center ai-center" style="background: #FD5749" @click="remove">删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getProductList,
|
|
getStoreList,
|
|
getVideoList,
|
|
getCountyFamousList,
|
|
removeFavorite
|
|
} from '@/api/favorite'
|
|
import { postCartAdd } from '@/api/store'
|
|
import CheckboxIcon from '@/components/CheckboxIcon.vue'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
export default {
|
|
components: { CheckboxIcon },
|
|
mixins: [pageListenMixins],
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
tabs: [
|
|
{key: 0, label: '商品'},
|
|
{key: 1, label: '店铺'},
|
|
{key: 2, label: '视频'},
|
|
{key: 3, label: '千县'},
|
|
],
|
|
tabsIndex: 0,
|
|
isManage: false,
|
|
isAll: false,
|
|
page: 1,
|
|
productList: [],
|
|
storeList: [],
|
|
videoList: [],
|
|
countyFamousList: [],
|
|
pageKeyId: Object.freeze('userCollectionIndex')
|
|
}
|
|
},
|
|
computed: {
|
|
selectCount: function () {
|
|
let count = 0
|
|
let countList = []
|
|
switch (this.tabsIndex) {
|
|
case 0:
|
|
countList = this.productList
|
|
break
|
|
case 1:
|
|
countList = this.storeList
|
|
break
|
|
case 2:
|
|
countList = this.videoList
|
|
break
|
|
case 3:
|
|
countList = this.countyFamousList
|
|
break
|
|
}
|
|
|
|
countList.forEach(item => {
|
|
if (item['state']) count++
|
|
})
|
|
return count
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchProduct()
|
|
},
|
|
methods: {
|
|
navToGoods(id) {
|
|
uni.navigateTo({
|
|
url: "/pages/shop/GoodsCon/index?id=" + id
|
|
})
|
|
},
|
|
changeTabs(index) {
|
|
if (this.isManage) return
|
|
// fix bug#1111
|
|
this.isAll = false
|
|
this.tabsIndex = index
|
|
this.page = 1
|
|
this.fetchData()
|
|
},
|
|
fetchData() {
|
|
switch (this.tabsIndex) {
|
|
case 0:
|
|
this.fetchProduct()
|
|
break
|
|
case 1:
|
|
this.fetchStore()
|
|
break
|
|
case 2:
|
|
this.fetchVideo()
|
|
break
|
|
case 3:
|
|
this.fetchCountyFamous()
|
|
break
|
|
}
|
|
},
|
|
changeManage() {
|
|
this.isManage = !this.isManage
|
|
},
|
|
onChange(state, mark) {
|
|
if (mark[0] === -1) {
|
|
this.isAll = state
|
|
this.handleAll(state)
|
|
return
|
|
}
|
|
switch (this.tabsIndex) {
|
|
case 0:
|
|
this.productList[mark]['state'] = state
|
|
this.isAll = this.selectCount === this.productList.length
|
|
break
|
|
case 1:
|
|
this.storeList[mark]['state'] = state
|
|
this.isAll = this.selectCount === this.storeList.length
|
|
break
|
|
case 2:
|
|
this.videoList[mark]['state'] = state
|
|
this.isAll = this.selectCount === this.videoList.length
|
|
break
|
|
case 3:
|
|
this.countyFamousList[mark]['state'] = state
|
|
console.log(this.countyFamousList);
|
|
this.isAll = this.selectCount === this.countyFamousList.length
|
|
break
|
|
}
|
|
},
|
|
handleAll(state) {
|
|
switch (this.tabsIndex) {
|
|
case 0:
|
|
this.productList.forEach(item => item.state = state)
|
|
break
|
|
case 1:
|
|
this.storeList.forEach(item => item.state = state)
|
|
break
|
|
case 2:
|
|
this.videoList.forEach(item => item.state = state)
|
|
break
|
|
case 3:
|
|
this.countyFamousList.forEach(item => item.state = state)
|
|
break
|
|
}
|
|
},
|
|
remove() {
|
|
const _this = this
|
|
const ids = []
|
|
switch (_this.tabsIndex) {
|
|
case 0:
|
|
_this.productList.forEach(item => {
|
|
if (item['state']) ids.push(item.id)
|
|
})
|
|
break
|
|
case 1:
|
|
_this.storeList.forEach(item => {
|
|
if (item['state']) ids.push(item.id)
|
|
})
|
|
break
|
|
case 2:
|
|
_this.videoList.forEach(item => {
|
|
if (item['state']) ids.push(item.id)
|
|
})
|
|
break
|
|
case 3:
|
|
_this.countyFamousList.forEach(item => {
|
|
if (item['state']) ids.push(item.id)
|
|
})
|
|
break
|
|
}
|
|
if (ids.length < 1) {
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title: '确认删除已选项目?',
|
|
content: '',
|
|
showCancel: true,
|
|
cancelText: '取消',
|
|
confirmText: '确认',
|
|
success: async (r) => {
|
|
if (r.confirm) {
|
|
const res = await removeFavorite(ids)
|
|
if (res.success) {
|
|
_this.isAll = false
|
|
_this.page = 1
|
|
_this.fetchData()
|
|
_this.removeAfter()
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
computedIsManage(arr) {
|
|
if(this.isManage && arr.length === 0) {
|
|
this.isManage = false
|
|
}
|
|
},
|
|
removeAfter() {
|
|
switch (this.tabsIndex) {
|
|
case 0:
|
|
this.productList = this.productList.filter(item => !item['state'])
|
|
break
|
|
case 1:
|
|
this.storeList = this.storeList.filter(item => !item['state'])
|
|
break
|
|
case 2:
|
|
this.videoList = this.videoList.filter(item => !item['state'])
|
|
break
|
|
case 3:
|
|
this.countyFamousList = this.videoList.filter(item => !item['state'])
|
|
break
|
|
}
|
|
},
|
|
async fetchProduct() {
|
|
const _this = this
|
|
if (_this.page === 1) {
|
|
_this.productList = []
|
|
}
|
|
const res = await getProductList(_this.page)
|
|
if (res.success) {
|
|
res.data['records']?.forEach(item => {
|
|
item.state = false
|
|
_this.productList.push(item)
|
|
})
|
|
_this.computedIsManage(_this.productList)
|
|
_this.page++
|
|
}
|
|
},
|
|
async fetchStore() {
|
|
const _this = this
|
|
if (_this.page === 1) {
|
|
_this.storeList = []
|
|
}
|
|
const res = await getStoreList(_this.page)
|
|
if (res.success) {
|
|
res.data['records']?.forEach(item => {
|
|
item.time = uni.$u.timeFrom(Date.parse(item.createTime))
|
|
item.state = false
|
|
_this.storeList.push(item)
|
|
})
|
|
_this.computedIsManage(_this.storeList)
|
|
_this.page++
|
|
}
|
|
},
|
|
async fetchVideo() {
|
|
const _this = this
|
|
if (_this.page === 1) {
|
|
_this.videoList = []
|
|
}
|
|
const res = await getVideoList(_this.page)
|
|
if (res.success) {
|
|
res.data['records']?.forEach(item => {
|
|
item.state = false
|
|
_this.videoList.push(item)
|
|
})
|
|
_this.computedIsManage(_this.videoList)
|
|
_this.page++
|
|
}
|
|
},
|
|
async fetchCountyFamous() {
|
|
const _this = this
|
|
if (_this.page === 1) {
|
|
_this.countyFamousList = []
|
|
}
|
|
const res = await getCountyFamousList(_this.page)
|
|
if (res.success) {
|
|
res.data['records']?.forEach(item => {
|
|
item.state = false
|
|
_this.countyFamousList.push(item)
|
|
})
|
|
_this.computedIsManage(_this.countyFamousList)
|
|
_this.page++
|
|
}
|
|
},
|
|
async addCart(item) {
|
|
const param = {
|
|
productId: item.productId,
|
|
uniqueId: item.uniqueId,
|
|
cartNum: 1
|
|
}
|
|
const res = await postCartAdd(param)
|
|
if (res.success) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
}).catch()
|
|
}
|
|
},
|
|
navToStore(id) {
|
|
uni.navigateTo({
|
|
url: '/pagesInn/inn/innHome?id=' + id
|
|
})
|
|
},
|
|
navToVideo(videoId) {
|
|
if (this.isManage) return
|
|
uni.navigateTo({
|
|
url: '/pkg-video/views/watch?videoId=' + videoId
|
|
})
|
|
},
|
|
gotoQianxianShop(item) {
|
|
if (this.isManage) return
|
|
uni.navigateTo({
|
|
url: `/pkg_product/views/famousQianxianShop?id=${item.countyFamousDataId}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.my-tabs {
|
|
width: 686rpx;
|
|
height: 72rpx;
|
|
margin: 24rpx 32rpx 0;
|
|
border-radius: 40rpx;
|
|
background: rgba(255, 255, 255, 1);
|
|
|
|
.tab-item {
|
|
position: relative;
|
|
width: 230rpx;
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.active {
|
|
border-radius: 40rpx;
|
|
background: #C41617;
|
|
color: #FFFFFF;
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
&.has-vertical:after {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
.has-vertical:after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
width: 0;
|
|
height: 36rpx;
|
|
background: #999999;
|
|
}
|
|
}
|
|
|
|
.manage {
|
|
padding: 15rpx 32rpx;
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.scroll-box {
|
|
height: calc(100vh - 168rpx);
|
|
box-sizing: border-box;
|
|
background: #f5f5f5;
|
|
&.county-scroll {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.no-data {
|
|
padding: 100px 0 0 0;
|
|
border-top: 20px solid #f5f5f5;
|
|
.img {
|
|
display: block;
|
|
width: 305rpx;
|
|
height: 332rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.manage-state {
|
|
height: calc(100vh - 268rpx);
|
|
}
|
|
|
|
.item-commodity {
|
|
padding: 24rpx 30rpx;
|
|
|
|
.cover {
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
margin-right: 8rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.more-t {
|
|
color: #333333;
|
|
font-size: 34rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.sub {
|
|
margin-top: 10rpx;
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.price {
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.cart {
|
|
width: 84rpx;
|
|
height: 56rpx;
|
|
margin-top: 14rpx;
|
|
background: #C41617;
|
|
border-radius: 28rpx;
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-store {
|
|
padding: 34rpx 32rpx 34rpx 30rpx;
|
|
|
|
.cover {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-right: 10rpx;
|
|
border: 4rpx solid #E92727;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.one-t {
|
|
width: 360rpx;
|
|
color: #333333;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.sub {
|
|
margin-top: 8rpx;
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.btn-nav {
|
|
width: 172rpx;
|
|
height: 56rpx;
|
|
border: 2px solid #E92727;
|
|
border-radius: 28rpx;
|
|
color: #E92727;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.img-product {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
margin-right: 10rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.item-video {
|
|
position: relative;
|
|
width: 218rpx;
|
|
height: 320rpx;
|
|
margin-right: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
|
|
.video-check {
|
|
position: absolute;
|
|
left: 20rpx;
|
|
top: 20rpx;
|
|
}
|
|
|
|
.img-cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.item-mask {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 218rpx;
|
|
height: 96rpx;
|
|
box-sizing: border-box;
|
|
padding: 8rpx;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
|
|
.icon-heart {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-video:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.fixed-manage {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
height: 100rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
|
|
|
|
.btn {
|
|
width: 196rpx;
|
|
height: 100rpx;
|
|
color: #FFFFFF;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
.county-list-wrap {
|
|
// display: flex;
|
|
// flex-wrap: wrap;
|
|
// // width: 710rpx;
|
|
// justify-content: flex-start;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
margin: 0 32rpx;
|
|
background-color: #f5f5f5;
|
|
grid-column-gap: 10px;
|
|
grid-row-gap: 10px;
|
|
.county-item {
|
|
// width: 320rpx;
|
|
height: 440rpx;
|
|
padding: 12rpx;
|
|
// margin: 0 22rpx 22rpx 0;
|
|
box-sizing: border-box;
|
|
border-radius: 16rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
// &:nth-child(2n) {
|
|
// margin-right: 0;
|
|
// }
|
|
.img-wrap {
|
|
position: relative;
|
|
.cover {
|
|
display: block;
|
|
width: 300rpx;
|
|
height: 280rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
.check {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
}
|
|
}
|
|
.county-info {
|
|
width: 100%;
|
|
.name {
|
|
width: 100%;
|
|
padding: 10rpx 0 0 0;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
line-height: 48rpx;
|
|
}
|
|
.intro {
|
|
padding: 10rpx 0 0 0;
|
|
font-size: 28rpx;
|
|
line-height: 32rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |