|
|
|
@@ -2,18 +2,19 @@ |
|
|
|
<view style="height: 100%"> |
|
|
|
<!-- <custom-nav-bar left-text="民生" /> --> |
|
|
|
|
|
|
|
<swiper class="people-custom-swiper" :indicator-dots="indicatorDots" :indicator-color="indicatorColor" |
|
|
|
:indicator-active-color="indicatorActiveColor"> |
|
|
|
<swiper :indicator-active-color="indicatorActiveColor" :indicator-color="indicatorColor" |
|
|
|
:indicator-dots="indicatorDots" |
|
|
|
class="people-custom-swiper"> |
|
|
|
<block v-for="(item, index) in imageList" :key="index" @click="jumpDetails"> |
|
|
|
<swiper-item> |
|
|
|
<!-- <navigator v-if="item.clickUrl" open-type="navigate" class="line-navigator" :url="item.clickUrl" hover-class="none"></navigator> --> |
|
|
|
<image class="custom-swiper-img" :src="item.pic"></image> |
|
|
|
<image :src="item.pic" class="custom-swiper-img"></image> |
|
|
|
</swiper-item> |
|
|
|
</block> |
|
|
|
</swiper> |
|
|
|
|
|
|
|
<view class="people-section"> |
|
|
|
<view class="second-block" :style="item.cssStyle" v-for="(item, index) in recursionList" :key="index"> |
|
|
|
<view v-for="(item, index) in recursionList" :key="index" :style="item.cssStyle" class="second-block"> |
|
|
|
<view class="title flex"> |
|
|
|
<text class="title-name">{{ item.name }}</text> |
|
|
|
</view> |
|
|
|
@@ -22,11 +23,11 @@ |
|
|
|
<swiper :indicator-dots="true" class="menu-swiper"> |
|
|
|
<swiper-item v-for="(e, i) in item.children" :key="i"> |
|
|
|
<view class="menu"> |
|
|
|
<view class="menu-item" :data-item="q" @click="jumpDetails" :style="q.cssStyle" v-for="(q, index) in e" |
|
|
|
:key="index"> |
|
|
|
<view v-for="(q, index) in e" :key="index" :data-item="q" :style="q.cssStyle" class="menu-item" |
|
|
|
@click="jumpDetails"> |
|
|
|
<!-- <navigator wx:if="{{q.url}}" class="line-navigator" :url="updateQuery(q.url, q)" hover-class="none"> --> |
|
|
|
<!-- </navigator> --> |
|
|
|
<image class="menu-item-ic-img" :src="q.icon"></image> |
|
|
|
<image :src="q.icon" class="menu-item-ic-img"></image> |
|
|
|
|
|
|
|
<text class="menu-item-name">{{ q.name }}</text> |
|
|
|
</view> |
|
|
|
@@ -41,374 +42,396 @@ |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="second-model flex flex-v-center flex-between" v-else> |
|
|
|
<view :class="'second-line flex flex-col ' + (idx === 0 ? 'line1' : '')" :style="itemName.cssStyle" |
|
|
|
v-for="(itemName, idx) in item.children" :key="idx"> |
|
|
|
<navigator v-if="itemName.clickUrl" class="line-navigator" :url="updateQuery(itemName.clickUrl, itemName)" |
|
|
|
hover-class="none"></navigator> |
|
|
|
<view v-else class="second-model flex flex-v-center flex-between"> |
|
|
|
<view v-for="(itemName, idx) in item.children" :key="idx" |
|
|
|
:class="'second-line flex flex-col ' + (idx === 0 ? 'line1' : '')" :style="itemName.cssStyle"> |
|
|
|
<navigator v-if="itemName.clickUrl" :url="updateQuery(itemName.clickUrl, itemName)" class="line-navigator" |
|
|
|
hover-class="none"></navigator> |
|
|
|
|
|
|
|
<image class="line-bg" :src="itemName.icon"></image> |
|
|
|
<image :src="itemName.icon" class="line-bg"></image> |
|
|
|
|
|
|
|
<view class="line-title" :style="itemName.sort === 6 ? 'font-size:24rpx':''">{{ itemName.name }}</view> |
|
|
|
<view :style="itemName.sort === 6 ? 'font-size:24rpx':''" class="line-title">{{ itemName.name }}</view> |
|
|
|
|
|
|
|
<view v-if="itemName.remark" class="line-msg">{{ itemName.remark }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="details.content !=='<p><br></p>'" class="forRecord"> |
|
|
|
<view>主办单位：{{ details.title }}</view> |
|
|
|
<view v-html="details.content"></view> |
|
|
|
</view> |
|
|
|
<view style="height:150rpx"></view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import utils from '@/utils/util.map.js' |
|
|
|
import * as publicApi from '@/api/publicApi.js'; // 公共 API |
|
|
|
import * as myApi from '@/api/myApi'; // 我的 |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
indicatorDots: true, |
|
|
|
indicatorColor: 'rgba(255,255,255,0.4)', |
|
|
|
indicatorActiveColor: '#FFFFFF', |
|
|
|
imageList: [], |
|
|
|
recursionList: [], |
|
|
|
userId: uni.getStorageSync('userInfoData').userId, |
|
|
|
i: '', |
|
|
|
q: { |
|
|
|
cssStyle: '', |
|
|
|
icon: '', |
|
|
|
name: '' |
|
|
|
}, |
|
|
|
e: [], |
|
|
|
latitude: 0, |
|
|
|
longitude: 0 |
|
|
|
}; |
|
|
|
} |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面加载 |
|
|
|
*/ |
|
|
|
, |
|
|
|
onLoad() { |
|
|
|
this.getBannerList(); |
|
|
|
this.recursionApi(); |
|
|
|
this.getUserInfoApi(); |
|
|
|
if (navigator.geolocation) { |
|
|
|
navigator.geolocation.getCurrentPosition( |
|
|
|
function(position) { |
|
|
|
import utils from '@/utils/util.map.js' |
|
|
|
import * as publicApi from '@/api/publicApi.js'; // 公共 API |
|
|
|
import * as myApi from '@/api/myApi'; // 我的 |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
indicatorDots: true, |
|
|
|
indicatorColor: 'rgba(255,255,255,0.4)', |
|
|
|
indicatorActiveColor: '#FFFFFF', |
|
|
|
imageList: [], |
|
|
|
recursionList: [], |
|
|
|
userId: uni.getStorageSync('userInfoData').userId, |
|
|
|
i: '', |
|
|
|
q: { |
|
|
|
cssStyle: '', |
|
|
|
icon: '', |
|
|
|
name: '' |
|
|
|
}, |
|
|
|
e: [], |
|
|
|
latitude: 0, |
|
|
|
longitude: 0, |
|
|
|
details: {} |
|
|
|
}; |
|
|
|
} |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面加载 |
|
|
|
*/ |
|
|
|
, |
|
|
|
onLoad() { |
|
|
|
this.getBannerList(); |
|
|
|
this.recursionApi(); |
|
|
|
this.getUserInfoApi(); |
|
|
|
this.getFormalism(); |
|
|
|
if (navigator.geolocation) { |
|
|
|
navigator.geolocation.getCurrentPosition( |
|
|
|
function (position) { |
|
|
|
this.latitude = position.coords.latitude; |
|
|
|
this.longitude = position.coords.longitude; |
|
|
|
uni.setStorageSync( |
|
|
|
"userLocation", |
|
|
|
position.coords.longitude + "," + position.coords.latitude |
|
|
|
"userLocation", |
|
|
|
position.coords.longitude + "," + position.coords.latitude |
|
|
|
); |
|
|
|
}, |
|
|
|
function(error) { |
|
|
|
function (error) { |
|
|
|
console.log(error.message); |
|
|
|
} |
|
|
|
); |
|
|
|
} else { |
|
|
|
console.log("浏览器不支持地理定位功能"); |
|
|
|
); |
|
|
|
} else { |
|
|
|
console.log("浏览器不支持地理定位功能"); |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async getUserInfoApi() { |
|
|
|
const res = await myApi.getUserInfoApi(); |
|
|
|
if (res.data) { |
|
|
|
this.myInfo = res.data |
|
|
|
uni.setStorageSync('userInfoCount', res.data); |
|
|
|
} |
|
|
|
}, |
|
|
|
updateQuery(url, name) { |
|
|
|
return utils.updateQuery(url, name); |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 接口 |
|
|
|
*/ |
|
|
|
async recursionApi() { |
|
|
|
const res = await publicApi.recursionApi({ |
|
|
|
bannerType: 1 |
|
|
|
}); |
|
|
|
res.data[0].children = this.arrayChunk(res.data[0].children, 8); |
|
|
|
console.log(res.data); |
|
|
|
if (res.data) { |
|
|
|
this.recursionList = res.data |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async getUserInfoApi() { |
|
|
|
const res = await myApi.getUserInfoApi(); |
|
|
|
if (res.data) { |
|
|
|
this.myInfo = res.data |
|
|
|
uni.setStorageSync('userInfoCount', res.data); |
|
|
|
} |
|
|
|
}, |
|
|
|
updateQuery(url, name) { |
|
|
|
return utils.updateQuery(url, name); |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 接口 |
|
|
|
*/ |
|
|
|
async recursionApi() { |
|
|
|
const res = await publicApi.recursionApi({ |
|
|
|
bannerType: 1 |
|
|
|
}); |
|
|
|
res.data[0].children = this.arrayChunk(res.data[0].children, 8); |
|
|
|
console.log(res.data); |
|
|
|
if (res.data) { |
|
|
|
this.recursionList = res.data |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
arrayChunk(array, size) { |
|
|
|
let data = []; |
|
|
|
for (let i = 0; i < array.length; i += size) { |
|
|
|
data.push(array.slice(i, i + size)); |
|
|
|
} |
|
|
|
return data; |
|
|
|
}, |
|
|
|
arrayChunk(array, size) { |
|
|
|
let data = []; |
|
|
|
for (let i = 0; i < array.length; i += size) { |
|
|
|
data.push(array.slice(i, i + size)); |
|
|
|
} |
|
|
|
return data; |
|
|
|
}, |
|
|
|
|
|
|
|
async getBannerList() { |
|
|
|
const res = await publicApi.getBannerApi({ |
|
|
|
type: 1 |
|
|
|
}); |
|
|
|
if (res.data) { |
|
|
|
this.imageList = res.data.list |
|
|
|
} |
|
|
|
}, |
|
|
|
async getBannerList() { |
|
|
|
const res = await publicApi.getBannerApi({ |
|
|
|
type: 1 |
|
|
|
}); |
|
|
|
if (res.data) { |
|
|
|
this.imageList = res.data.list |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 页面事件 |
|
|
|
*/ |
|
|
|
jumpSecond() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/packages/people/pages/second/second' |
|
|
|
}); |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 页面事件 |
|
|
|
*/ |
|
|
|
jumpSecond() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/packages/people/pages/second/second' |
|
|
|
}); |
|
|
|
}, |
|
|
|
async getFormalism() { |
|
|
|
const res = await publicApi.getFormalismApi({ |
|
|
|
id: 2, |
|
|
|
}) |
|
|
|
if (res.data) { |
|
|
|
this.details = res.data |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
jumpDetails(event) { |
|
|
|
const { |
|
|
|
item |
|
|
|
} = event.currentTarget.dataset; |
|
|
|
const urlArray = item.clickUrl.split(','); |
|
|
|
console.log(item) |
|
|
|
if (item.name === '智慧社区') { |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/packages/public/pages/web-view/web-view?parentId=[id]&name=${item.name}` |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
if (urlArray.length === 2) { |
|
|
|
uni.navigateToMiniProgram({ |
|
|
|
appId: urlArray[0] || '', |
|
|
|
path: urlArray[1] || '', |
|
|
|
success(res) { |
|
|
|
// 打开成功 |
|
|
|
console.log(res, '跳转小程序'); |
|
|
|
}, |
|
|
|
fail() { |
|
|
|
uni.showToast({ |
|
|
|
title: '请填写正确的分类菜单跳转链接', |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 处理参数 |
|
|
|
const url = urlArray[0].replace(/(?:\[)(.*?)(?:\])/g, function(_, it) { |
|
|
|
return item[it]; |
|
|
|
}); |
|
|
|
jumpDetails(event) { |
|
|
|
const { |
|
|
|
item |
|
|
|
} = event.currentTarget.dataset; |
|
|
|
const urlArray = item.clickUrl.split(','); |
|
|
|
console.log(item) |
|
|
|
if (item.name === '智慧社区') { |
|
|
|
uni.navigateTo({ |
|
|
|
url: url || '' |
|
|
|
url: `/packages/public/pages/web-view/web-view?parentId=[id]&name=${item.name}` |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
if (urlArray.length === 2) { |
|
|
|
uni.navigateToMiniProgram({ |
|
|
|
appId: urlArray[0] || '', |
|
|
|
path: urlArray[1] || '', |
|
|
|
success(res) { |
|
|
|
// 打开成功 |
|
|
|
console.log(res, '跳转小程序'); |
|
|
|
}, |
|
|
|
fail() { |
|
|
|
uni.showToast({ |
|
|
|
title: '请填写正确的分类菜单跳转链接', |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 处理参数 |
|
|
|
const url = urlArray[0].replace(/(?:\[)(.*?)(?:\])/g, function (_, it) { |
|
|
|
return item[it]; |
|
|
|
}); |
|
|
|
uni.navigateTo({ |
|
|
|
url: url || '' |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="less"> |
|
|
|
/* pages/people/people.wxss */ |
|
|
|
page { |
|
|
|
--nav-bar-background-color: transparent; |
|
|
|
--nav-bar-text-color: #ffffff; // 导航栏左侧文案样式 |
|
|
|
} |
|
|
|
|
|
|
|
.line-navigator { |
|
|
|
/* pages/people/people.wxss */ |
|
|
|
page { |
|
|
|
--nav-bar-background-color: transparent; |
|
|
|
--nav-bar-text-color: #ffffff; // 导航栏左侧文案样式 |
|
|
|
} |
|
|
|
|
|
|
|
.line-navigator { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.people-custom-swiper { |
|
|
|
height: 330rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.custom-swiper-img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.people-custom-swiper { |
|
|
|
height: 330rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.custom-swiper-img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
.people-section { |
|
|
|
padding: 0 24rpx; |
|
|
|
|
|
|
|
.people-section { |
|
|
|
padding: 0 24rpx; |
|
|
|
.title { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #000000; |
|
|
|
line-height: 36rpx; |
|
|
|
padding-left: 6rpx; |
|
|
|
|
|
|
|
.title { |
|
|
|
.title-name { |
|
|
|
position: relative; |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #000000; |
|
|
|
line-height: 36rpx; |
|
|
|
padding-left: 6rpx; |
|
|
|
|
|
|
|
.title-name { |
|
|
|
position: relative; |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #333333; |
|
|
|
|
|
|
|
&::after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
left: -6rpx; |
|
|
|
bottom: 0; |
|
|
|
z-index: -1; |
|
|
|
// width: 175rpx; |
|
|
|
width: 115%; |
|
|
|
height: 10rpx; |
|
|
|
background: var(--title-guides-color); |
|
|
|
border-radius: 2rpx; |
|
|
|
} |
|
|
|
color: #333333; |
|
|
|
|
|
|
|
&::after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
left: -6rpx; |
|
|
|
bottom: 0; |
|
|
|
z-index: -1; |
|
|
|
// width: 175rpx; |
|
|
|
width: 115%; |
|
|
|
height: 10rpx; |
|
|
|
background: var(--title-guides-color); |
|
|
|
border-radius: 2rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.second-block { |
|
|
|
margin-top: 25rpx; |
|
|
|
|
|
|
|
.second-model { |
|
|
|
margin-top: 40rpx; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
.second-line { |
|
|
|
width: 343rpx; |
|
|
|
height: 110rpx; |
|
|
|
justify-content: center; |
|
|
|
padding-left: 39rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&:not(:first-child) { |
|
|
|
margin-top: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.line-bg { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
z-index: 0; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.line-title { |
|
|
|
position: absolute; |
|
|
|
font-size: 40rpx; |
|
|
|
font-weight: 500; |
|
|
|
line-height: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.line-msg { |
|
|
|
position: absolute; |
|
|
|
margin-top: 100rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #666666; |
|
|
|
line-height: 26rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.second-block { |
|
|
|
margin-top: 25rpx; |
|
|
|
|
|
|
|
.line1 { |
|
|
|
width: 100%; |
|
|
|
height: 171rpx; |
|
|
|
.second-model { |
|
|
|
margin-top: 40rpx; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
.second-line { |
|
|
|
width: 343rpx; |
|
|
|
height: 110rpx; |
|
|
|
justify-content: center; |
|
|
|
padding-left: 39rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.line-title { |
|
|
|
font-size: 40rpx; |
|
|
|
font-weight: 500; |
|
|
|
line-height: 40rpx; |
|
|
|
} |
|
|
|
&:not(:first-child) { |
|
|
|
margin-top: 16rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.menu { |
|
|
|
// margin-top: 50rpx; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(4, 120rpx); |
|
|
|
// grid-gap: 62rpx; |
|
|
|
// gap: 62rpx; |
|
|
|
grid-column-gap: 62rpx; |
|
|
|
grid-row-gap: 32rpx; |
|
|
|
column-gap: 62rpx; |
|
|
|
row-gap: 32rpx; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.menu-item { |
|
|
|
width: 120rpx; |
|
|
|
text-align: center; |
|
|
|
// margin-top: 50rpx; |
|
|
|
// margin-right: 62rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&:nth-child(4n) { |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.menu-item-ic-img { |
|
|
|
margin-bottom: 24rpx; |
|
|
|
width: 120rpx; |
|
|
|
height: 80rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.menu-item-name { |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
line-height: 26rpx; |
|
|
|
} |
|
|
|
.line-bg { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
z-index: 0; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.second-block { |
|
|
|
color: #fe6e72; |
|
|
|
} |
|
|
|
.line-title { |
|
|
|
position: absolute; |
|
|
|
font-size: 40rpx; |
|
|
|
font-weight: 500; |
|
|
|
line-height: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.menu-swiper { |
|
|
|
width: 100%; |
|
|
|
height: 375rpx; |
|
|
|
|
|
|
|
// 修改dot |
|
|
|
.wx-swiper-dots .wx-swiper-dot { |
|
|
|
width: 25rpx; |
|
|
|
height: 4rpx; |
|
|
|
background: #efefef; |
|
|
|
border-radius: 3rpx; |
|
|
|
.line-msg { |
|
|
|
position: absolute; |
|
|
|
margin-top: 100rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #666666; |
|
|
|
line-height: 26rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.wx-swiper-dots .wx-swiper-dot-active { |
|
|
|
width: 143rpx; |
|
|
|
height: 4rpx; |
|
|
|
background: #ff8f8f; |
|
|
|
} |
|
|
|
.line1 { |
|
|
|
width: 100%; |
|
|
|
height: 171rpx; |
|
|
|
|
|
|
|
/* 修改dot之间的间距 */ |
|
|
|
.wx-swiper-dots .wx-swiper-dot:nth-of-type(n + 2) { |
|
|
|
margin-left: -14rpx; |
|
|
|
.line-title { |
|
|
|
font-size: 40rpx; |
|
|
|
font-weight: 500; |
|
|
|
line-height: 40rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.menu { |
|
|
|
// margin-top: 50rpx; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(4, 160rpx); |
|
|
|
column-gap: 16rpx; |
|
|
|
row-gap: 40rpx; |
|
|
|
justify-content: center; |
|
|
|
padding-top: 40rpx; |
|
|
|
// padding: 40rpx 0 56rpx; |
|
|
|
grid-template-columns: repeat(4, 120rpx); |
|
|
|
// grid-gap: 62rpx; |
|
|
|
// gap: 62rpx; |
|
|
|
grid-column-gap: 62rpx; |
|
|
|
grid-row-gap: 32rpx; |
|
|
|
column-gap: 62rpx; |
|
|
|
row-gap: 32rpx; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.menu-item { |
|
|
|
width: 160rpx; |
|
|
|
position: relative; |
|
|
|
width: 120rpx; |
|
|
|
text-align: center; |
|
|
|
// margin-top: 50rpx; |
|
|
|
// margin-right: 62rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&:nth-child(4n) { |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.menu-item-ic-img { |
|
|
|
width: 72rpx; |
|
|
|
height: 72rpx; |
|
|
|
margin: 0 auto 22rpx; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
width: 120rpx; |
|
|
|
height: 80rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.menu-item-name { |
|
|
|
font-size: 28rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
line-height: 28rpx; |
|
|
|
line-height: 26rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.second-block { |
|
|
|
color: #fe6e72; |
|
|
|
} |
|
|
|
|
|
|
|
.menu-swiper { |
|
|
|
width: 100%; |
|
|
|
height: 375rpx; |
|
|
|
|
|
|
|
// 修改dot |
|
|
|
.wx-swiper-dots .wx-swiper-dot { |
|
|
|
width: 25rpx; |
|
|
|
height: 4rpx; |
|
|
|
background: #efefef; |
|
|
|
border-radius: 3rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.wx-swiper-dots .wx-swiper-dot-active { |
|
|
|
width: 143rpx; |
|
|
|
height: 4rpx; |
|
|
|
background: #ff8f8f; |
|
|
|
} |
|
|
|
|
|
|
|
/* 修改dot之间的间距 */ |
|
|
|
|
|
|
|
.wx-swiper-dots .wx-swiper-dot:nth-of-type(n + 2) { |
|
|
|
margin-left: -14rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.menu { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(4, 160rpx); |
|
|
|
column-gap: 16rpx; |
|
|
|
row-gap: 40rpx; |
|
|
|
justify-content: center; |
|
|
|
padding-top: 40rpx; |
|
|
|
// padding: 40rpx 0 56rpx; |
|
|
|
|
|
|
|
.menu-item { |
|
|
|
width: 160rpx; |
|
|
|
position: relative; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
.menu-item-ic-img { |
|
|
|
width: 72rpx; |
|
|
|
height: 72rpx; |
|
|
|
margin: 0 auto 22rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.menu-item-name { |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
line-height: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.forRecord { |
|
|
|
text-align: center; |
|
|
|
margin-top: 20px; |
|
|
|
font-size: 26rpx; |
|
|
|
line-height: 25px; |
|
|
|
} |
|
|
|
</style> |
shichunfei
1 month ago