跳转优化

store/src/admin/home/workbench.vue

@@ -1,451 +1,470 @@
 <template>
-	<div class="app-main app-content">
-		<!-- 用户信息 -->
-		<div class="user-wrap">
-			<div class="user-top">
-				<div class="app-size-28">今日概况</div>
-				<div @click="pageTo('/admin/setting/password')">
-					<app-avatar-module :src="avatarImg | default_avatar" :width="80" />
-				</div>
-			</div>
-			<div class="income-amount" @click="pageTo('/admin/assets/list')">
-				<div>收入金额</div>
-				<div class="price">{{ data.todayData.income }}</div>
-			</div>
-			<div class="user-bottom">
-				<div class="info-list">
-					<div class="info-list-name">浏览量</div>
-					<div class="info-list-value">{{ data.todayData.visit || 0 }}</div>
-				</div>
-				<div class="info-list">
-					<div class="info-list-name">新粉丝</div>
-					<div class="info-list-value">{{ data.todayData.fans || 0 }}</div>
-				</div>
-				<div class="info-list">
-					<div class="info-list-name">新客户</div>
-					<div class="info-list-value">{{ data.todayData.user || 0 }}</div>
-				</div>
-			</div>
-		</div>
-		<!-- 订单总览 -->
-		<div class="module-com order-wrap">
-			<div class="total-blo">
-				<div class="total-list" v-for="(item, index) in orderData" :key="index" @click="pageTo(item)">
-					<div class="list-num">{{ item.value }}</div>
-					<div class="app-color-3">{{ item.name }}</div>
-				</div>
-			</div>
-		</div>
-		<!-- 消息 -->
-		<div class="module-com news-wrap">
-			<div class="news-list" v-for="(item, index) in data.notice" :key="index" @click="pageToFn(item)">
-				<div class="news-left">
-					<i class="iconfont iconxiaoxi2"></i>
-					<span>{{ item.title }}</span>
-				</div>
-				<div class="news-right">
-					<span>立即授权绑定</span>
-					<i class="iconfont iconxiangyou"></i>
-				</div>
-			</div>
-		</div>
-		<!-- 客户按钮 -->
-		<div class="module-com tabs-wrap">
-			<div class="tabs-list" v-for="(item, index) in tabsData" :key="index" @click="pageTo(item)">
-				<div class="tabs-img">
-					<img :src="item.img" alt mode="widthFix" />
-				</div>
-				<div class="tabs-name">{{ item.name }}</div>
-			</div>
-		</div>
-		<!-- 总览 -->
-		<div class="module-com total-wrap">
-			<div class="total-tit">总览</div>
-			<div class="total-blo">
-				<div class="total-list" v-for="(item, index) in totalData" :key="index">
-					<div class="list-num">{{ item.value }}</div>
-					<div class="app-color-3">{{ item.name }}</div>
-				</div>
-			</div>
-		</div>
-		<!-- <fab-module /> -->
-		<!-- 续费遮罩层 -->
-		<modal-module :show="renewMask" :custom="true" :maskClosable="false" padding="30rpx 30rpx">
-			<template>
-				<div class="renew-wrap">
-					<div class="renew-wrap-text">你的账号已到期</div>
-					<!-- <button class="admin-button-com middle" @click="pageTo('/admin/renew/index')">立即续费</button> -->
-					<button class="admin-button-com middle" @click="renewFn()">立即续费</button>
-				</div>
-			</template>
-		</modal-module>
-	</div>
+  <div class="app-main app-content">
+    <!-- 用户信息 -->
+    <div class="user-wrap">
+      <div class="user-top">
+        <div class="app-size-28">今日概况</div>
+        <div @click="pageTo('/admin/setting/password')">
+          <app-avatar-module :src="avatarImg | default_avatar" :width="80" />
+        </div>
+      </div>
+      <div class="income-amount" @click="pageTo('/admin/assets/list')">
+        <div>收入金额</div>
+        <div class="price">{{ data.todayData.income }}</div>
+      </div>
+      <div class="user-bottom">
+        <div class="info-list">
+          <div class="info-list-name">浏览量</div>
+          <div class="info-list-value">{{ data.todayData.visit || 0 }}</div>
+        </div>
+        <div class="info-list">
+          <div class="info-list-name">新粉丝</div>
+          <div class="info-list-value">{{ data.todayData.fans || 0 }}</div>
+        </div>
+        <div class="info-list">
+          <div class="info-list-name">新客户</div>
+          <div class="info-list-value">{{ data.todayData.user || 0 }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 订单总览 -->
+    <div class="module-com order-wrap">
+      <div class="total-blo">
+        <div
+          class="total-list"
+          v-for="(item, index) in orderData"
+          :key="index"
+          @click="pageTo(item)"
+        >
+          <div class="list-num">{{ item.value }}</div>
+          <div class="app-color-3">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 消息 -->
+    <div class="module-com news-wrap">
+      <div
+        class="news-list"
+        v-for="(item, index) in data.notice"
+        :key="index"
+        @click="pageToFn(item)"
+      >
+        <div class="news-left">
+          <i class="iconfont iconxiaoxi2"></i>
+          <span>{{ item.title }}</span>
+        </div>
+        <div class="news-right">
+          <span>立即授权绑定</span>
+          <i class="iconfont iconxiangyou"></i>
+        </div>
+      </div>
+    </div>
+    <!-- 客户按钮 -->
+    <div class="module-com tabs-wrap">
+      <div class="tabs-list" v-for="(item, index) in tabsData" :key="index">
+        <div @click="goToItem(item)">
+          <div class="tabs-img">
+            <img :src="item.img" alt mode="widthFix" />
+          </div>
+          <div class="tabs-name">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 总览 -->
+    <div class="module-com total-wrap">
+      <div class="total-tit">总览</div>
+      <div class="total-blo">
+        <div class="total-list" v-for="(item, index) in totalData" :key="index">
+          <div class="list-num">{{ item.value }}</div>
+          <div class="app-color-3">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- <fab-module /> -->
+    <!-- 续费遮罩层 -->
+    <modal-module :show="renewMask" :custom="true" :maskClosable="false" padding="30rpx 30rpx">
+      <template>
+        <div class="renew-wrap">
+          <div class="renew-wrap-text">你的账号已到期</div>
+          <!-- <button class="admin-button-com middle" @click="pageTo('/admin/renew/index')">立即续费</button> -->
+          <button class="admin-button-com middle" @click="renewFn()">立即续费</button>
+        </div>
+      </template>
+    </modal-module>
+  </div>
 </template>
 
 <script>
-	import { mapGetters, mapState } from 'vuex'
-	import FabModule from '@/components/plugin/fab'
-	import AppAvatarModule from '@/components/module/app-avatar'
-	import ModalModule from '@/components/plugin/modal'
-	import { getDataTimestamp } from '@/utils/common'
-	// api
-	import { getUser } from '@/utils/auth'
-	import { consoleIndex } from '@/api/workbench'
-	export default {
-		name: 'admin-workbench',
-		components: {
-			ModalModule,
-			FabModule,
-			AppAvatarModule
-		},
-		data() {
-			return {
-				constant: this.$constant,
-				// 遮罩层
-				renewMask: false,
-				data: {
-					admin: {},
-					asset: {},
-					notice: {},
-					todayData: {}
-				},
-				// 订单总览
-				orderData: [
-					{
-						name: '待付款',
-						value: 0,
-						url: '/admin/home/order',
-						type: 4,
-						query: {
-							tabIndex: 1
-						}
-					},
-					{
-						name: '待配送',
-						value: 0,
-						url: '/admin/home/order',
-						type: 4,
-						query: {
-							tabIndex: 2
-						}
-					},
-					{
-						name: '配送中',
-						value: 0,
-						url: '/admin/home/order',
-						type: 4,
-						query: {
-							tabIndex: 3
-						}
-					},
-					{
-						name: '待通知',
-						value: 0
-					},
-					{
-						name: '已完结',
-						url: '/admin/home/order',
-						type: 4,
-						query: {
-							tabIndex: 4
-						},
-						value: 0
-					},
-					{
-						name: '全部',
-						url: '/admin/home/order',
-						type: 4,
-						query: {
-							tabIndex: 0
-						},
-						value: 0
-					}
-				],
-				// tab按钮
-				tabsData: [
-					{
-						name: '商品管理',
-						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-1.png`,
-						url: '/admin/goodsManage/list'
-					},
-					{
-						name: '老带新',
-						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-2.png`,
-						url: '/admin/interest/invite'
-					},
-					{
-						name: '图库管理',
-						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-1.png`,
-						url: '/admin/goodsManage/img-store'
-					},
-					{
-						name: '优惠券',
-						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-3.png`,
-						url: '/admin/coupon/list'
-					},
-					{
-						name: '广告管理',
-						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-4.png`,
-						url: '/admin/ad/list'
-					},
-					// {
-					// 	name: '数据统计',
-					// 	img: `${this.$constant.imgUrl}/retail/admin/tab-icon-5.png`,
-					// 	url: '/admin/statistics/index'
-					// },
-					{
-						name: '员工管理',
-						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-6.png`,
-						url: '/admin/staff/list'
-					},
-					{
-						name: '门店管理',
-						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-6.png`,
-						url: '/admin/shop/list'
-					},
-					{
-						name: '邀请开店',
-						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-7.png`,
-						url: '/admin/interest/my-invite'
-					},
-					{
-						name: '设置',
-						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-8.png`,
-						url: '/admin/setting/list'
-					},
-					{
-						name: '花卉宝',
-						img: `${this.$constant.imgUrl}/retail/admin/tab-icon-7.png`,
-						url: '/admin/official/index'
-					},
-				],
-				// 总览
-				totalData: [
-					{
-						name: '会员数',
-						value: 0
-					},
-					{
-						name: '粉丝数',
-						value: 0
-					},
-					{
-						name: '客户数',
-						value: 0
-					},
-					{
-						name: '总收入（元）',
-						value: 0
-					},
-					{
-						name: '总访问量',
-						value: 0
-					},
-					{
-						name: '剩余短信',
-						value: 0
-					}
-				]
-			}
-		},
-		computed: {
-			...mapGetters({ userInfo: 'getUser' }),
-			avatarImg() {
-				return this.$util.isEmpty(this.userInfo) ? '' : this.userInfo.logoUrl
-			}
-		},
-		onLoad(option) {
-			// if (this.$util.getCheckLogin()) return
-			// this.init()
-		},
-		methods: {
-			init() {
-				getUser().then(res => {
-					let nowTime = getDataTimestamp(new Date(), true)
-					if (nowTime > res.setDeadline) {
-						this.renewMask = true
-					}
-				})
-				consoleIndex().then(res => {
-					this.data = res.data
-					const { asset } = res.data
-					if (!this.$util.isEmpty(asset)) {
-						// 订单总览
-						this.orderData[0].value = asset.unPayOrder
-						this.orderData[1].value = asset.unSendOrder
-						this.orderData[2].value = asset.sendingOrder
-						this.orderData[3].value = asset.unNoticeOrder
-						this.orderData[4].value = asset.finishOrder
-						this.orderData[5].value = asset.totalOrder
-						// 总览数据
-						this.totalData[0].value = asset.totalMember
-						this.totalData[1].value = asset.totalFans
-						this.totalData[2].value = asset.totalUser
-						this.totalData[3].value = asset.totalIncome
-						this.totalData[4].value = asset.totalVisit
-						this.totalData[5].value = asset.remainSmsNum
-					}
-				})
-			},
-			// 跳转
-			pageToFn(item) {
-				// #ifdef H5
-				location.href = item.url
-				// #endif
-				// #ifndef H5
-				// #endif
-			},
-			// 续费
-			renewFn() {
-				// #ifdef H5
-				location.href = `${window.location.protocol}//www.${this.$constant.firstHost}.com/#/?merchantId=${this.userInfo.extend.merchantId}&pay=1`
-				// #endif
-			}
-		}
-	}
+import { mapGetters, mapState } from "vuex";
+import FabModule from "@/components/plugin/fab";
+import AppAvatarModule from "@/components/module/app-avatar";
+import ModalModule from "@/components/plugin/modal";
+import { getDataTimestamp } from "@/utils/common";
+// api
+import { getUser } from "@/utils/auth";
+import { consoleIndex } from "@/api/workbench";
+export default {
+  name: "admin-workbench",
+  components: {
+    ModalModule,
+    FabModule,
+    AppAvatarModule
+  },
+  data() {
+    return {
+      constant: this.$constant,
+      // 遮罩层
+      renewMask: false,
+      data: {
+        admin: {},
+        asset: {},
+        notice: {},
+        todayData: {}
+      },
+      // 订单总览
+      orderData: [
+        {
+          name: "待付款",
+          value: 0,
+          url: "/admin/home/order",
+          type: 4,
+          query: {
+            tabIndex: 1
+          }
+        },
+        {
+          name: "待配送",
+          value: 0,
+          url: "/admin/home/order",
+          type: 4,
+          query: {
+            tabIndex: 2
+          }
+        },
+        {
+          name: "配送中",
+          value: 0,
+          url: "/admin/home/order",
+          type: 4,
+          query: {
+            tabIndex: 3
+          }
+        },
+        {
+          name: "待通知",
+          value: 0
+        },
+        {
+          name: "已完结",
+          url: "/admin/home/order",
+          type: 4,
+          query: {
+            tabIndex: 4
+          },
+          value: 0
+        },
+        {
+          name: "全部",
+          url: "/admin/home/order",
+          type: 4,
+          query: {
+            tabIndex: 0
+          },
+          value: 0
+        }
+      ],
+      // tab按钮
+      tabsData: [
+        {
+          name: "商品管理",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-1.png`,
+          url: "/admin/goodsManage/list"
+        },
+        {
+          name: "老带新",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-2.png`,
+          url: "/admin/interest/invite"
+        },
+        {
+          name: "图库管理",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-1.png`,
+          url: "/admin/goodsManage/img-store"
+        },
+        {
+          name: "优惠券",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-3.png`,
+          url: "/admin/coupon/list"
+        },
+        {
+          name: "广告管理",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-4.png`,
+          url: "/admin/ad/list"
+        },
+        {
+          name: "数据统计",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-5.png`,
+          url: "/admin/statistics/index"
+        },
+        {
+          name: "员工管理",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-6.png`,
+          url: "/admin/staff/list"
+        },
+        {
+          name: "门店管理",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-6.png`,
+          url: "/admin/shop/list"
+        },
+        {
+          name: "邀请开店",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-7.png`,
+          url: "/admin/interest/my-invite"
+        },
+        {
+          name: "设置",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-8.png`,
+          url: "/admin/setting/list"
+        },
+        {
+          name: "花卉宝",
+          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-7.png`,
+          url: "/admin/official/index"
+        }
+      ],
+      // 总览
+      totalData: [
+        {
+          name: "会员数",
+          value: 0
+        },
+        {
+          name: "粉丝数",
+          value: 0
+        },
+        {
+          name: "客户数",
+          value: 0
+        },
+        {
+          name: "总收入（元）",
+          value: 0
+        },
+        {
+          name: "总访问量",
+          value: 0
+        },
+        {
+          name: "剩余短信",
+          value: 0
+        }
+      ]
+    };
+  },
+  computed: {
+    ...mapGetters({ userInfo: "getUser" }),
+    avatarImg() {
+      return this.$util.isEmpty(this.userInfo) ? "" : this.userInfo.logoUrl;
+    }
+  },
+  onLoad(option) {
+    // if (this.$util.getCheckLogin()) return
+    // this.init()
+  },
+  methods: {
+    init() {
+      getUser().then(res => {
+        let nowTime = getDataTimestamp(new Date(), true);
+        if (nowTime > res.setDeadline) {
+          this.renewMask = true;
+        }
+      });
+      consoleIndex().then(res => {
+        this.data = res.data;
+        const { asset } = res.data;
+        if (!this.$util.isEmpty(asset)) {
+          // 订单总览
+          this.orderData[0].value = asset.unPayOrder;
+          this.orderData[1].value = asset.unSendOrder;
+          this.orderData[2].value = asset.sendingOrder;
+          this.orderData[3].value = asset.unNoticeOrder;
+          this.orderData[4].value = asset.finishOrder;
+          this.orderData[5].value = asset.totalOrder;
+          // 总览数据
+          this.totalData[0].value = asset.totalMember;
+          this.totalData[1].value = asset.totalFans;
+          this.totalData[2].value = asset.totalUser;
+          this.totalData[3].value = asset.totalIncome;
+          this.totalData[4].value = asset.totalVisit;
+          this.totalData[5].value = asset.remainSmsNum;
+        }
+      });
+    },
+    // 跳转
+    pageToFn(item) {
+      // #ifdef H5
+      location.href = item.url;
+      // #endif
+      // #ifndef H5
+      // #endif
+    },
+    // 续费
+    renewFn() {
+      // #ifdef H5
+      location.href = `${window.location.protocol}//www.${this.$constant.firstHost}.com/#/?merchantId=${this.userInfo.extend.merchantId}&pay=1`;
+      // #endif
+    },
+    goToItem(item) {
+      if (item.name == "数据统计") {
+        this.$msg("即将开通...");
+      } else {
+        pageTo(item);
+      }
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.app-content {
-		padding-bottom: 10px;
-	}
-	// 公共
-	.module-com {
-		margin-bottom: 20px;
-		// padding: 20px;
-		background-color: #fff;
-		// box-shadow: 0px 6px 16px #ddd;
-		// border-radius: 10px;
-	}
-	// 用户信息
-	.user-wrap {
-		padding: 20px 40px 40px 30px;
-		color: #fff;
-		text-align: center;
-		background-image: url('../../static/images/admin/bg.png');
-		background-size: 100% 380px;
-		background-repeat: no-repeat;
-		.user-top {
-			// padding-top: 20px;
-			@include disFlex(center, space-between);
-		}
-		.income-amount {
-			margin-top: 14px;
-			margin-bottom: 40px;
-			.price {
-				font-size: 50px;
-				font-weight: bold;
-				margin-top: 4px;
-			}
-		}
-		.user-bottom {
-			@include disFlex(center, space-around);
-			// padding-bottom: 40px;
-			.info-list-name {
-				color: #bfd4ff;
-			}
-			.info-list-value {
-				font-size: 36px;
-				font-weight: bold;
-				margin-top: 4px;
-			}
-		}
-	}
-	// 消息
-	.news-wrap {
-		.news-list {
-			@include disFlex(center, space-between);
-			padding: 30px 24px 30px 30px;
-			border-bottom: 1px solid $borderColor;
-			font-size: 26px;
-			color: $fontColor2;
-			&:active {
-				background-color: $backColor;
-			}
-			& > div {
-				@include disFlex(center, flex-start);
-			}
-			.news-left {
-				.iconfont {
-					color: $mainColor;
-					margin-right: 10px;
-				}
-			}
-			.news-right {
-				font-size: 24px;
-				color: $mainColor;
-				transform: scale(0.9);
-				@include disFlex(flex-end, flex-start);
-				.iconfont {
-					font-size: 24px;
-					margin-left: 10px;
-				}
-			}
-		}
-	}
-	// 总览
-	.total-wrap,
-	.order-wrap {
-		.total-tit {
-			padding: 18px 0 18px 20px;
-			border-bottom: 1px solid $borderColor;
-			font-weight: 600;
-		}
-		.total-blo {
-			@include disFlex(center, space-between);
-			flex-wrap: wrap;
-			padding: 30px 0 40px;
-			.total-list {
-				width: 33%;
-				text-align: center;
-				padding-bottom: 54px;
-				border-right: 1px solid $borderColor;
-				.list-num {
-					margin-bottom: 8px;
-					font-size: 36px;
-					font-weight: bold;
-				}
-			}
-			.total-list:nth-child(3n) {
-				border-right: none;
-			}
-			.total-list:nth-child(n + 4) {
-				padding-bottom: 0;
-			}
-		}
-	}
-	// tabs
-	.tabs-wrap {
-		padding: 40px 10px;
-		@include disFlex(center, flex-start);
-		flex-wrap: wrap;
-		.tabs-list {
-			width: 25%;
-			margin-top: 50px;
-			text-align: center;
-			.tabs-img {
-				width: 100px;
-				height: 100px;
-				margin: 0 auto;
-				img {
-					height: 100%;
-				}
-			}
-			.tabs-name {
-				color: $fontColor2;
-			}
-			&:nth-child(-n + 4) {
-				margin-top: 0;
-			}
-		}
-	}
-	// 遮罩层
-	.renew-wrap {
-		text-align: center;
-		.renew-wrap-text {
-			margin-top: 30px;
-			margin-bottom: 60px;
-			font-size: 34px;
-		}
-	}
+.app-content {
+  padding-bottom: 10px;
+}
+// 公共
+.module-com {
+  margin-bottom: 20px;
+  // padding: 20px;
+  background-color: #fff;
+  // box-shadow: 0px 6px 16px #ddd;
+  // border-radius: 10px;
+}
+// 用户信息
+.user-wrap {
+  padding: 20px 40px 40px 30px;
+  color: #fff;
+  text-align: center;
+  background-image: url("../../static/images/admin/bg.png");
+  background-size: 100% 380px;
+  background-repeat: no-repeat;
+  .user-top {
+    // padding-top: 20px;
+    @include disFlex(center, space-between);
+  }
+  .income-amount {
+    margin-top: 14px;
+    margin-bottom: 40px;
+    .price {
+      font-size: 50px;
+      font-weight: bold;
+      margin-top: 4px;
+    }
+  }
+  .user-bottom {
+    @include disFlex(center, space-around);
+    // padding-bottom: 40px;
+    .info-list-name {
+      color: #bfd4ff;
+    }
+    .info-list-value {
+      font-size: 36px;
+      font-weight: bold;
+      margin-top: 4px;
+    }
+  }
+}
+// 消息
+.news-wrap {
+  .news-list {
+    @include disFlex(center, space-between);
+    padding: 30px 24px 30px 30px;
+    border-bottom: 1px solid $borderColor;
+    font-size: 26px;
+    color: $fontColor2;
+    &:active {
+      background-color: $backColor;
+    }
+    & > div {
+      @include disFlex(center, flex-start);
+    }
+    .news-left {
+      .iconfont {
+        color: $mainColor;
+        margin-right: 10px;
+      }
+    }
+    .news-right {
+      font-size: 24px;
+      color: $mainColor;
+      transform: scale(0.9);
+      @include disFlex(flex-end, flex-start);
+      .iconfont {
+        font-size: 24px;
+        margin-left: 10px;
+      }
+    }
+  }
+}
+// 总览
+.total-wrap,
+.order-wrap {
+  .total-tit {
+    padding: 18px 0 18px 20px;
+    border-bottom: 1px solid $borderColor;
+    font-weight: 600;
+  }
+  .total-blo {
+    @include disFlex(center, space-between);
+    flex-wrap: wrap;
+    padding: 30px 0 40px;
+    .total-list {
+      width: 33%;
+      text-align: center;
+      padding-bottom: 54px;
+      border-right: 1px solid $borderColor;
+      .list-num {
+        margin-bottom: 8px;
+        font-size: 36px;
+        font-weight: bold;
+      }
+    }
+    .total-list:nth-child(3n) {
+      border-right: none;
+    }
+    .total-list:nth-child(n + 4) {
+      padding-bottom: 0;
+    }
+  }
+}
+// tabs
+.tabs-wrap {
+  padding: 40px 10px;
+  @include disFlex(center, flex-start);
+  flex-wrap: wrap;
+  .tabs-list {
+    width: 25%;
+    margin-top: 50px;
+    text-align: center;
+    .tabs-img {
+      width: 100px;
+      height: 100px;
+      margin: 0 auto;
+      img {
+        height: 100%;
+      }
+    }
+    .tabs-name {
+      color: $fontColor2;
+    }
+    &:nth-child(-n + 4) {
+      margin-top: 0;
+    }
+  }
+}
+// 遮罩层
+.renew-wrap {
+  text-align: center;
+  .renew-wrap-text {
+    margin-top: 30px;
+    margin-bottom: 60px;
+    font-size: 34px;
+  }
+}
 </style>