|
|
@@ -1,348 +1,325 @@
|
|
|
<template>
|
|
|
<view class="u-wrap">
|
|
|
<view class="u-menu-wrap">
|
|
|
- <scroll-view
|
|
|
- scroll-y
|
|
|
- scroll-with-animation
|
|
|
- class="u-tab-view menu-scroll-view"
|
|
|
- :scroll-top="scrollTop"
|
|
|
- :scroll-into-view="itemId"
|
|
|
- >
|
|
|
- <view
|
|
|
- v-for="(item, index) in cateList"
|
|
|
- :key="index"
|
|
|
- class="u-tab-item"
|
|
|
- :class="[current == index ? 'u-tab-item-active' : '']"
|
|
|
- @tap.stop="handleLeftMenuClick(index)"
|
|
|
- >
|
|
|
- <text class="u-line-1">{{ item.description }}</text>
|
|
|
+ <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
|
|
|
+ :scroll-into-view="itemId">
|
|
|
+ <view v-for="(item, index) in left_first_list" :key="index" class="u-tab-item"
|
|
|
+ :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="handleLeftMenuClick(index)">
|
|
|
+ <text class="u-line-1">{{ item.name }}</text>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
- <scroll-view
|
|
|
- :scroll-top="scrollRightTop"
|
|
|
- scroll-y
|
|
|
- scroll-with-animation
|
|
|
- class="right-box"
|
|
|
- @scroll="rightScroll"
|
|
|
- >
|
|
|
+
|
|
|
+
|
|
|
+ <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
|
|
|
<view class="page-view">
|
|
|
- <view
|
|
|
- class="class-item"
|
|
|
- :id="'item' + index"
|
|
|
- v-for="(item, index) in cateList"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
+ <view class="class-item" :id="'item' + index" v-for="(item, index) in cateList" :key="index">
|
|
|
<view class="item-title">
|
|
|
<text>{{ item.description }}</text>
|
|
|
</view>
|
|
|
<view class="item-container">
|
|
|
- <view
|
|
|
- class="thumb-box"
|
|
|
- v-for="(child, childIndex) in item.children"
|
|
|
- :key="childIndex"
|
|
|
- @click="handleItemClick(child.id, child.name)"
|
|
|
- >
|
|
|
- <image
|
|
|
- v-if="child.icon != ''"
|
|
|
- class="item-menu-image"
|
|
|
- :src="child.icon"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
- <view
|
|
|
- v-else
|
|
|
- class="item-menu-image row-c"
|
|
|
- style="background-color: #f4f6f8"
|
|
|
- ><text style="font-size: 20rpx; color: #d0d0d0"
|
|
|
- >加载失败</text
|
|
|
- ></view
|
|
|
- >
|
|
|
+ <view class="thumb-box" v-for="(child, childIndex) in item.children" :key="childIndex"
|
|
|
+ @click="handleItemClick(child.id, child.name)">
|
|
|
+ <image v-if="child.icon != ''" class="item-menu-image" :src="child.icon" mode=""></image>
|
|
|
+ <view v-else class="item-menu-image row-c" style="background-color: #f4f6f8"><text
|
|
|
+ style="font-size: 20rpx; color: #d0d0d0">加载失败</text></view>
|
|
|
<view class="item-menu-name">{{ child.name }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { buildTree } from '@/utils/tools.js';
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- scrollTop: 0, //tab标题的滚动条位置
|
|
|
- oldScrollTop: 0, // tab标题的滚动条旧位置
|
|
|
- current: 0, // 预设当前项的值
|
|
|
- menuHeight: 0, // 左边菜单的高度
|
|
|
- menuItemHeight: 0, // 左边菜单item的高度
|
|
|
- itemId: '', // 栏目右边scroll-view用于滚动的id
|
|
|
- cateList: [], // 渲染的数据
|
|
|
- arr: [], // 储存距离顶部高度的数组
|
|
|
- scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
|
|
- timer: null, // 定时器
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- this.cateList = buildTree(this.getCache('categories'));
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- this.getMenuItemTop();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * 获取一个目标元素的高度
|
|
|
- * @elClass 元素的类名
|
|
|
- * @dataVal 储存高度的对象
|
|
|
- */
|
|
|
- getElRect(elClass, dataVal) {
|
|
|
- new Promise((resolve, reject) => {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query
|
|
|
- .select('.' + elClass)
|
|
|
- .fields(
|
|
|
- {
|
|
|
- size: true,
|
|
|
- },
|
|
|
- res => {
|
|
|
- // 如果节点尚未生成，res值为null，循环调用执行
|
|
|
- if (!res) {
|
|
|
+ import { buildTree } from '@/utils/tools.js';
|
|
|
+ import { maintainCategories } from "@/api/business.js"
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ scrollTop: 0, //tab标题的滚动条位置
|
|
|
+ oldScrollTop: 0, // tab标题的滚动条旧位置
|
|
|
+ current: 0, // 预设当前项的值
|
|
|
+ menuHeight: 0, // 左边菜单的高度
|
|
|
+ menuItemHeight: 0, // 左边菜单item的高度
|
|
|
+ itemId: '', // 栏目右边scroll-view用于滚动的id
|
|
|
+ cateList: [], // 渲染的数据
|
|
|
+ arr: [], // 储存距离顶部高度的数组
|
|
|
+ scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
|
|
+ timer: null, // 定时器
|
|
|
+
|
|
|
+ left_first_list:[] ,//左侧一级列表
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.cateList = buildTree(this.getCache('categories'));
|
|
|
+ console.log('cateList',this.cateList);
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.getMenuItemTop();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 获取左侧一级列表信息
|
|
|
+ maintainCategories().then(res=>{
|
|
|
+ this.left_first_list = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 获取一个目标元素的高度
|
|
|
+ * @elClass 元素的类名
|
|
|
+ * @dataVal 储存高度的对象
|
|
|
+ */
|
|
|
+ getElRect(elClass, dataVal) {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query
|
|
|
+ .select('.' + elClass)
|
|
|
+ .fields({
|
|
|
+ size: true,
|
|
|
+ },
|
|
|
+ res => {
|
|
|
+ // 如果节点尚未生成，res值为null，循环调用执行
|
|
|
+ if (!res) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getElRect(elClass);
|
|
|
+ }, 10);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this[dataVal] = res.height;
|
|
|
+ resolve();
|
|
|
+ },
|
|
|
+ )
|
|
|
+ .exec();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取右边菜单每个item到顶部的距离
|
|
|
+ * 储存到 arr 数组里面用于后面滚动判断
|
|
|
+ */
|
|
|
+ getMenuItemTop() {
|
|
|
+ new Promise(resolve => {
|
|
|
+ let selectorQuery = uni.createSelectorQuery();
|
|
|
+ selectorQuery
|
|
|
+ .selectAll('.class-item')
|
|
|
+ .boundingClientRect(rects => {
|
|
|
+ // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
|
|
+ if (!rects.length) {
|
|
|
setTimeout(() => {
|
|
|
- this.getElRect(elClass);
|
|
|
+ this.getMenuItemTop();
|
|
|
}, 10);
|
|
|
return;
|
|
|
}
|
|
|
- this[dataVal] = res.height;
|
|
|
- resolve();
|
|
|
- },
|
|
|
- )
|
|
|
- .exec();
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取右边菜单每个item到顶部的距离
|
|
|
- * 储存到 arr 数组里面用于后面滚动判断
|
|
|
- */
|
|
|
- getMenuItemTop() {
|
|
|
- new Promise(resolve => {
|
|
|
- let selectorQuery = uni.createSelectorQuery();
|
|
|
- selectorQuery
|
|
|
- .selectAll('.class-item')
|
|
|
- .boundingClientRect(rects => {
|
|
|
- // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
|
|
- if (!rects.length) {
|
|
|
- setTimeout(() => {
|
|
|
- this.getMenuItemTop();
|
|
|
- }, 10);
|
|
|
- return;
|
|
|
- }
|
|
|
- rects.forEach(rect => {
|
|
|
- // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
|
|
- // this.arr.push(rect.top - rects[0].top);
|
|
|
- this.arr.push(rect.top);
|
|
|
- resolve();
|
|
|
+ rects.forEach(rect => {
|
|
|
+ // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
|
|
+ // this.arr.push(rect.top - rects[0].top);
|
|
|
+ this.arr.push(rect.top);
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 观测元素相交状态
|
|
|
+ * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
|
|
+ * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
|
|
+ */
|
|
|
+ async observer() {
|
|
|
+ this.cateList.map((val, index) => {
|
|
|
+ let observer = uni.createIntersectionObserver(this);
|
|
|
+ observer
|
|
|
+ .relativeTo('.right-box', {
|
|
|
+ top: 0,
|
|
|
+ })
|
|
|
+ .observe('#item' + index, res => {
|
|
|
+ if (res.intersectionRatio > 0) {
|
|
|
+ let id = res.id.substring(4);
|
|
|
+ this.leftMenuStatus(id);
|
|
|
+ }
|
|
|
});
|
|
|
- })
|
|
|
- .exec();
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 观测元素相交状态
|
|
|
- * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
|
|
- * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
|
|
- */
|
|
|
- async observer() {
|
|
|
- this.cateList.map((val, index) => {
|
|
|
- let observer = uni.createIntersectionObserver(this);
|
|
|
- observer
|
|
|
- .relativeTo('.right-box', {
|
|
|
- top: 0,
|
|
|
- })
|
|
|
- .observe('#item' + index, res => {
|
|
|
- if (res.intersectionRatio > 0) {
|
|
|
- let id = res.id.substring(4);
|
|
|
- this.leftMenuStatus(id);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 设置左边菜单的滚动状态
|
|
|
- * @index 传入的 ID
|
|
|
- */
|
|
|
- async leftMenuStatus(index) {
|
|
|
- this.current = index;
|
|
|
- // 如果为0，意味着尚未初始化
|
|
|
- if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
|
|
- await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
- await this.getElRect('u-tab-item', 'menuItemHeight');
|
|
|
- }
|
|
|
- // 将菜单活动item垂直居中
|
|
|
- this.scrollTop =
|
|
|
- index * this.menuItemHeight +
|
|
|
- this.menuItemHeight / 2 -
|
|
|
- this.menuHeight / 2;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 点击左边的栏目切换
|
|
|
- * @index 传入的 ID
|
|
|
- */
|
|
|
- async handleLeftMenuClick(index) {
|
|
|
- if (this.arr.length == 0) {
|
|
|
- await this.getMenuItemTop();
|
|
|
- }
|
|
|
- if (index == this.current) return;
|
|
|
- this.scrollRightTop = this.oldScrollTop;
|
|
|
- this.$nextTick(function () {
|
|
|
- this.scrollRightTop = this.arr[index];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 设置左边菜单的滚动状态
|
|
|
+ * @index 传入的 ID
|
|
|
+ */
|
|
|
+ async leftMenuStatus(index) {
|
|
|
this.current = index;
|
|
|
- this.leftMenuStatus(index);
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 右边菜单滚动
|
|
|
- * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
|
|
- */
|
|
|
- async rightScroll(e) {
|
|
|
- this.oldScrollTop = e.detail.scrollTop;
|
|
|
- if (this.arr.length == 0) {
|
|
|
- await this.getMenuItemTop();
|
|
|
- }
|
|
|
- if (this.timer) return;
|
|
|
- if (!this.menuHeight) {
|
|
|
- await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- // 节流
|
|
|
- this.timer = null;
|
|
|
- // scrollHeight为右边菜单垂直中点位置
|
|
|
- // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
|
|
|
- // scrollHeight为右边菜单头部位置
|
|
|
- let scrollHeight = e.detail.scrollTop + 20;
|
|
|
- for (let i = 0; i < this.arr.length; i++) {
|
|
|
- let height1 = this.arr[i];
|
|
|
- let height2 = this.arr[i + 1];
|
|
|
- if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
|
|
|
- this.leftMenuStatus(i);
|
|
|
- return;
|
|
|
- }
|
|
|
+ // 如果为0，意味着尚未初始化
|
|
|
+ if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
|
|
+ await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
+ await this.getElRect('u-tab-item', 'menuItemHeight');
|
|
|
}
|
|
|
- }, 10);
|
|
|
+ // 将菜单活动item垂直居中
|
|
|
+ this.scrollTop =
|
|
|
+ index * this.menuItemHeight +
|
|
|
+ this.menuItemHeight / 2 -
|
|
|
+ this.menuHeight / 2;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击左边的栏目切换
|
|
|
+ * @index 传入的 ID
|
|
|
+ */
|
|
|
+ async handleLeftMenuClick(index) {
|
|
|
+ if (this.arr.length == 0) {
|
|
|
+ await this.getMenuItemTop();
|
|
|
+ }
|
|
|
+ if (index == this.current) return;
|
|
|
+ this.scrollRightTop = this.oldScrollTop;
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.scrollRightTop = this.arr[index];
|
|
|
+ this.current = index;
|
|
|
+ this.leftMenuStatus(index);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 右边菜单滚动
|
|
|
+ * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
|
|
+ */
|
|
|
+ async rightScroll(e) {
|
|
|
+ this.oldScrollTop = e.detail.scrollTop;
|
|
|
+ if (this.arr.length == 0) {
|
|
|
+ await this.getMenuItemTop();
|
|
|
+ }
|
|
|
+ if (this.timer) return;
|
|
|
+ if (!this.menuHeight) {
|
|
|
+ await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ // 节流
|
|
|
+ this.timer = null;
|
|
|
+ // scrollHeight为右边菜单垂直中点位置
|
|
|
+ // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
|
|
|
+ // scrollHeight为右边菜单头部位置
|
|
|
+ let scrollHeight = e.detail.scrollTop + 20;
|
|
|
+ for (let i = 0; i < this.arr.length; i++) {
|
|
|
+ let height1 = this.arr[i];
|
|
|
+ let height2 = this.arr[i + 1];
|
|
|
+ if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
|
|
|
+ this.leftMenuStatus(i);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 10);
|
|
|
+ },
|
|
|
+ handleItemClick(id, name) {
|
|
|
+ this.$Router.push('/pages/business/list')
|
|
|
+ }
|
|
|
},
|
|
|
- handleItemClick(id,name){
|
|
|
- this.$Router.push('/pages/business/list')
|
|
|
- }
|
|
|
- },
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.u-wrap {
|
|
|
- /* #ifdef H5 */
|
|
|
- height: calc(100vh - var(--window-top));
|
|
|
- /* #endif */
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 100vh;
|
|
|
-}
|
|
|
+ .u-wrap {
|
|
|
+ /* #ifdef H5 */
|
|
|
+ height: calc(100vh - var(--window-top));
|
|
|
+ /* #endif */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
|
|
|
-.u-search-box {
|
|
|
- padding: 18rpx 30rpx;
|
|
|
-}
|
|
|
+ .u-search-box {
|
|
|
+ padding: 18rpx 30rpx;
|
|
|
+ }
|
|
|
|
|
|
-.u-menu-wrap {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
+ .u-menu-wrap {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
|
|
|
-.u-tab-view {
|
|
|
- width: 200rpx;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
+ .u-tab-view {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
-.u-tab-item {
|
|
|
- height: 110rpx;
|
|
|
- background: #f6f6f6;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #444;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 1;
|
|
|
-}
|
|
|
+ .u-tab-item {
|
|
|
+ height: 110rpx;
|
|
|
+ background: #f6f6f6;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #444;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
|
|
|
-.u-tab-item-active {
|
|
|
- position: relative;
|
|
|
- color: #06a446;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 500;
|
|
|
- background: #d6ffe7;
|
|
|
-}
|
|
|
+ .u-tab-item-active {
|
|
|
+ position: relative;
|
|
|
+ color: #06a446;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #d6ffe7;
|
|
|
+ }
|
|
|
|
|
|
-.u-tab-item-active::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- border-left: 4px solid #06a446;
|
|
|
- height: 52rpx;
|
|
|
- left: 0;
|
|
|
- top: 29rpx;
|
|
|
-}
|
|
|
+ .u-tab-item-active::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ border-left: 4px solid #06a446;
|
|
|
+ height: 52rpx;
|
|
|
+ left: 0;
|
|
|
+ top: 29rpx;
|
|
|
+ }
|
|
|
|
|
|
-.u-tab-view {
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
+ .u-tab-view {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
-.right-box {
|
|
|
- background-color: rgb(250, 250, 250);
|
|
|
-}
|
|
|
+ .right-box {
|
|
|
+ background-color: rgb(250, 250, 250);
|
|
|
+ }
|
|
|
|
|
|
-.page-view {
|
|
|
- padding: 16rpx;
|
|
|
-}
|
|
|
+ .page-view {
|
|
|
+ padding: 16rpx;
|
|
|
+ }
|
|
|
|
|
|
-.class-item {
|
|
|
- margin-bottom: 30rpx;
|
|
|
- background-color: #fff;
|
|
|
- padding: 16rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
-}
|
|
|
+ .class-item {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
|
|
|
-.class-item:last-child {
|
|
|
- min-height: 100vh;
|
|
|
-}
|
|
|
+ .class-item:last-child {
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
|
|
|
-.item-title {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #06a446;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
+ .item-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #06a446;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
-.item-menu-name {
|
|
|
- margin-top: 8rpx;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #06a446;
|
|
|
-}
|
|
|
+ .item-menu-name {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #06a446;
|
|
|
+ }
|
|
|
|
|
|
-.item-container {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
+ .item-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
|
|
|
-.thumb-box {
|
|
|
- width: 33.333333%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- margin-top: 20rpx;
|
|
|
-}
|
|
|
+ .thumb-box {
|
|
|
+ width: 33.333333%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
|
|
|
-.item-menu-image {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
-}
|
|
|
+ .item-menu-image {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ }
|
|
|
</style>
|
