1062 lines
		
	
	
		
			24 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			1062 lines
		
	
	
		
			24 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <!--
 | |
|  * @Descripttion:
 | |
|  * @version:
 | |
|  * @Author: kBank
 | |
|  * @Date: 2022-11-21 15:11:22
 | |
| -->
 | |
| <template>
 | |
|   <view :class="userInfo.skin ? 'content1' : 'content'">
 | |
|     <view class="content_a">
 | |
|       <!-- 商品专区入口 先别删  -->
 | |
|       <!-- <view @tap="goSpecialArea">会员专区</view> -->
 | |
|       <view :class="userInfo.skin ? 'index-top1' : 'index-top'">
 | |
|         <!-- <view class="index_t">
 | |
|           <view class="index-left">
 | |
|             <view class="english">GLOBALIZATION</view>
 | |
|             <view class="text">{{ '全球一体化' }}</view>
 | |
|           </view>
 | |
|           
 | |
|         </view> -->
 | |
|       </view>
 | |
|       
 | |
|       <view class="banner" v-if="isEmpty(goodsList.advertBannerList) == false">
 | |
|         <view class="uni-margin-wrap">
 | |
|           <swiper
 | |
|             class="swiper"
 | |
|             circular
 | |
|             :indicator-dots="indicatorDots"
 | |
|             :autoplay="autoplay"
 | |
|             :interval="interval"
 | |
|             :duration="duration"
 | |
|           >
 | |
|             <swiper-item
 | |
|               v-for="(item, index) in goodsList.advertBannerList"
 | |
|               :key="index"
 | |
|               @click="bannerTap(item.link)"
 | |
|             >
 | |
|               <view class="swiper-item uni-bg-red">
 | |
|                 <image :src="item.picture"></image>
 | |
|               </view>
 | |
|             </swiper-item>
 | |
|           </swiper>
 | |
|         </view>
 | |
|       </view>
 | |
|       <view class="goods-sort">
 | |
|         <view class="goods-flexs">
 | |
|           <view
 | |
|             v-for="(item, index) in recommendSpecialAreaList"
 | |
|             :key="index"
 | |
|           >      
 | |
|             <view
 | |
|               class="goods-view"
 | |
|               @click="navTap(item)"
 | |
|               v-if="item.waresList && (index < 8 || moreFlag == true)"
 | |
|             >
 | |
|               <area-product-list 
 | |
|                 :list="item.waresList" 
 | |
|                 :title="item.specialAreaName"
 | |
|                 size="small"
 | |
|               ></area-product-list>
 | |
|               <!-- <view class="goods-top">
 | |
|                 <view class="title">{{ item.specialAreaName }}</view>
 | |
|               </view>
 | |
|               <template v-if="item.waresList">
 | |
|                 <view class="goods-cen">
 | |
|                   <view
 | |
|                     class="goods-list"
 | |
|                     v-for="(items, indexs) in item.waresList"
 | |
|                     :key="indexs"
 | |
|                   >
 | |
|                     <view class="goods-content">
 | |
|                       <view class="goods">
 | |
|                         <image :src="items.cover1"></image>
 | |
|                       </view>
 | |
|                     </view>
 | |
|                   </view>
 | |
|                 </view>
 | |
|               </template> -->
 | |
|             </view>
 | |
|           </view>
 | |
|         </view>
 | |
|         <view v-if="isEmpty(goodsList.recommendSpecialAreaList) == false">
 | |
|           <view
 | |
|             class="more"
 | |
|             @click="more"
 | |
|             v-if="!moreFlag && goodsList.recommendSpecialAreaList.length > 6"
 | |
|           >
 | |
|             {{ '查看更多' }}
 | |
|           </view>
 | |
|         </view>
 | |
|         <view class="goods_content">
 | |
|           
 | |
|           <view
 | |
|             class="goods-center-lists"
 | |
|             v-for="item in goodsList.waresVoList"
 | |
|             :key="item.waresId"
 | |
|             @click="goDetails(item)"
 | |
|           >
 | |
|             <view
 | |
|               class="fly"
 | |
|               v-show="item.preSaleStatus == 3 || item.isSale == 1"
 | |
|             ></view>
 | |
|             <view class="goods-flex-s">
 | |
|               <view class="goods-img">
 | |
|                 <image :src="item.cover1"></image>
 | |
|               </view>
 | |
|               <view class="padding_s goods-info">
 | |
|                 <view class="goods-name">{{ item.waresName }}</view>
 | |
|                 <view class="goods-sales-wrapper">
 | |
|                   <!-- <view class="goods-sales">累计销量{{ formatSales(item.sales) }}</view> -->
 | |
|                   <view
 | |
|                     class="goods-price"
 | |
|                     v-if="item.specialArea == 31 && userInfo.isMakerSpace == 1"
 | |
|                   >
 | |
|                     <span class="price-symbol">¥</span>
 | |
|                     <span>{{ formatCurrency(item.vipPrice) }}</span>
 | |
|                   </view>
 | |
|                   <view class="goods-price" v-if="item.specialArea != 31">
 | |
|                     <span class="price-symbol">¥</span>
 | |
|                     <span>{{ formatCurrency(item.waresPrice) }}</span>
 | |
|                   </view>
 | |
|                   <view
 | |
|                     class="goods-price"
 | |
|                     v-if="item.specialArea == 31 && userInfo.isMakerSpace == 0"
 | |
|                   >
 | |
|                     <span class="price-symbol">¥</span>
 | |
|                     <span>{{ formatCurrency(item.waresPrice) }}</span>
 | |
|                   </view>
 | |
|                 </view>
 | |
|                 
 | |
|               </view>
 | |
|             </view>
 | |
|           </view>
 | |
|         </view>
 | |
|       </view>
 | |
|       <cl-tabbar :current="0"></cl-tabbar>
 | |
|       <div>
 | |
|         <!-- 公告弹窗 -->
 | |
|         <notice-popup
 | |
|           @getTree="getTree"
 | |
|           :userInfo="userInfo"
 | |
|           ref="child"
 | |
|           :publishLocationIndex="10"
 | |
|         ></notice-popup>
 | |
|         <!-- 植树弹窗
 | |
|         <getTree ref="tree"></getTree>
 | |
|          -->
 | |
|         <!-- 站内信弹窗 -->
 | |
|         <znNewsPopup
 | |
|           ref="child2"
 | |
|           @childMethodTrigger="callChildMethod"
 | |
|         ></znNewsPopup>
 | |
|         <!-- 直推排行弹窗
 | |
|         <directrank-popup
 | |
|           @callznMethodTrigger="callznMethod"
 | |
|         ></directrank-popup>
 | |
|          -->
 | |
| 
 | |
|         <u-modal
 | |
|           :show="promptFlag"
 | |
|           title="提示"
 | |
|           :closeOnClickOverlay="true"
 | |
|           showCancelButton
 | |
|           :confirmText="confirmText"
 | |
|           confirmColor="#DE3932"
 | |
|           @close="promptFlag = false"
 | |
|           @cancel="promptFlag = false"
 | |
|           @confirm="toDel"
 | |
|           :content="promptMsg"
 | |
|         ></u-modal>
 | |
|       </div>
 | |
|     </view>
 | |
|   </view>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| // import titleLine from '@/components/titleLine.vue'
 | |
| import * as api from "@/config/login.js";
 | |
| import * as apis from "@/config/index.js";
 | |
| import * as ban from "@/config/balance.js";
 | |
| import { getAreaGoods } from '@/config/special-area'
 | |
| import clTabbar from "@/components/cl-tabbar.vue";
 | |
| import noticePopup from "@/components/noticePopup.vue";
 | |
| import getTree from "@/components/getTree.vue";
 | |
| import znNewsPopup from "@/components/znNewsPopup.vue";
 | |
| import areaProductList from '@/components/area-product-list/index.vue'
 | |
| 
 | |
| export default {
 | |
|   components: {
 | |
|     noticePopup,
 | |
|     znNewsPopup,
 | |
|     "cl-tabbar": clTabbar,
 | |
|     getTree,
 | |
|     areaProductList
 | |
|   },
 | |
|   filters: {
 | |
|     seles(value) {
 | |
|       if (value > 999) {
 | |
|         return 999 + "+";
 | |
|       } else {
 | |
|         return value;
 | |
|       }
 | |
|     },
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       promptFlag: false,
 | |
|       promptMsg: "",
 | |
|       confirmText: "",
 | |
|       userInfo: uni.getStorageSync("User"),
 | |
|       moreFlag: false,
 | |
|       index: 0,
 | |
|       indicatorDots: true,
 | |
|       interval: 5000,
 | |
|       autoplay: true,
 | |
|       duration: 500,
 | |
|       goodsList: [],
 | |
|       recommendSpecialAreaList: [],
 | |
|       zoneList: [
 | |
|         {
 | |
|           label: '注册专区',
 | |
|           value: 1,
 | |
|           name: "regiest",
 | |
|           children: [
 | |
|             {
 | |
|               label: '自营专区',
 | |
|               value: 1,
 | |
|               name: "regiestArea",
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: "乐学易考",
 | |
|               value: 24,
 | |
|               name: "ezLearnReg",
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|         {
 | |
|           label: '升级专区',
 | |
|           value: 2,
 | |
|           name: "upgrade",
 | |
|           children: [
 | |
|             {
 | |
|               label: '自营专区',
 | |
|               value: 2,
 | |
|               name: "upgradeArea",
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '海粉专区',
 | |
|               value: 27,
 | |
|               name: "haiFunUpd",
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: "乐学易考",
 | |
|               value: 25,
 | |
|               name: "ezLearnUp",
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
| 
 | |
|         {
 | |
|           label: '复购专区',
 | |
|           value: 3,
 | |
|           name: "repurchase",
 | |
|           children: [
 | |
|             {
 | |
|               label: '自营专区',
 | |
|               value: 3,
 | |
|               name: "self",
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: "乐学易考",
 | |
|               value: 26,
 | |
|               name: "ezLearnRep",
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '免费注册',
 | |
|               value: 21,
 | |
|               name: "haiFans",
 | |
|               isShow: true,
 | |
|             },
 | |
| 
 | |
|             {
 | |
|               label: '复购合作',
 | |
|               value: 22,
 | |
|               name: "cooperation",
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '直播专区',
 | |
|               value: 14,
 | |
|               name: "live",
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '工具流',
 | |
|               value: 12,
 | |
|               name: "gongju",
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|         {
 | |
|           label: '福利专区',
 | |
|           value: 13,
 | |
|           children: [],
 | |
|           name: "welfare",
 | |
|         },
 | |
|         {
 | |
|           label: '积分专区',
 | |
|           value: 11,
 | |
|           children: [],
 | |
|           name: "integral",
 | |
|         },
 | |
|         {
 | |
|           label: '重消专区',
 | |
|           value: 10,
 | |
|           children: [],
 | |
|           name: "rescission",
 | |
|         },
 | |
|         {
 | |
|           label: "专供专区",
 | |
|           value: 31,
 | |
|           children: [],
 | |
|           name: "wolesaleArea",
 | |
|         },
 | |
|         {
 | |
|           label: "续约专区",
 | |
|           value: 30,
 | |
|           children: [],
 | |
|           name: "renewalArea",
 | |
|         },
 | |
|         {
 | |
|           label: '创客空间专区',
 | |
|           value: 28,
 | |
|           children: [],
 | |
|           name: "makerArea",
 | |
|         },
 | |
|         {
 | |
|           label: '架构管理',
 | |
|           value: 6,
 | |
|           name: "frame",
 | |
|           children: [
 | |
|             {
 | |
|               label: '安置架构',
 | |
|               value: 6,
 | |
|               name: "architecture",
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '推荐架构',
 | |
|               value: 7,
 | |
|               name: "recommend",
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|         {
 | |
|           label: '分享专区',
 | |
|           value: 7,
 | |
|           name: "share",
 | |
|           children: [
 | |
|             {
 | |
|               label: '海粉分享',
 | |
|               value: 7,
 | |
|               name: "hiFans",
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '免费注册',
 | |
|               value: 21,
 | |
|               name: "haiFans",
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|         {
 | |
|           label: '创客礼包',
 | |
|           value: 18,
 | |
|           isShow: true,
 | |
|           children: [
 | |
|             {
 | |
|               label: '创客礼包',
 | |
|               value: 18,
 | |
|               isShow: true,
 | |
|               children: [],
 | |
|             },
 | |
|             {
 | |
|               label: '赋能礼包',
 | |
|               value: 19,
 | |
|               isShow: true,
 | |
|               children: [],
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|       ],
 | |
|     };
 | |
|   },
 | |
|   onLoad() {
 | |
|     if (
 | |
|       uni.getStorageSync("showInfo") == undefined ||
 | |
|       uni.getStorageSync("showInfo") == 0
 | |
|     ) {
 | |
|     }
 | |
|     this.getGoodsInfo();
 | |
|     this.getAreaGoods();
 | |
|     // this.getLanguage();
 | |
|     this.getService();
 | |
|   },
 | |
|   onShow() {
 | |
|     this.$store.dispatch("getCarLength");
 | |
|   },
 | |
|   onPullDownRefresh() {
 | |
|     let that = this;
 | |
|     setTimeout(() => {
 | |
|       that.getGoodsInfo();
 | |
|       uni.stopPullDownRefresh(); //停止刷新
 | |
|     }, 1000);
 | |
|   },
 | |
|   methods: {
 | |
|     formatSales(value) {
 | |
|       if (value > 999) {
 | |
|         return "999+";
 | |
|       } else {
 | |
|         return value;
 | |
|       }
 | |
|     },
 | |
|     formatCurrency(value) {
 | |
|       // Simple currency formatting, adapt if needed (e.g., using Intl.NumberFormat or a library)
 | |
|       if (typeof value !== 'number') {
 | |
|         return value;
 | |
|       }
 | |
|       return value.toFixed(2); // Assumes 2 decimal places
 | |
|     },
 | |
|     goAreaUrl() {
 | |
|       ban.agreementName().then((res) => {
 | |
|         if (res.data == 0) {
 | |
|           uni.navigateTo({
 | |
|             url:
 | |
|               "/pages/specialArea/list?label=续约专区" +
 | |
|               "&specialArea=30" +
 | |
|               "&children=[]",
 | |
|           });
 | |
|         } else {
 | |
|           uni.showModal({
 | |
|             title: '提示',
 | |
|             content: '请先进行实名认证',
 | |
|             success: (res) => {
 | |
|               if (res.confirm) {
 | |
|                 uni.navigateTo({
 | |
|                   url: "/pages/selfService/realName/realName",
 | |
|                 });
 | |
|               }
 | |
|             },
 | |
|           });
 | |
|         }
 | |
|       });
 | |
|     },
 | |
|     getAreaGoods() {
 | |
|       getAreaGoods().then((res) => {
 | |
|         this.recommendSpecialAreaList = res.data?.recommendSpecialAreaList || []
 | |
|       })
 | |
|     },
 | |
|     toDel() {
 | |
|       this.promptFlag = false;
 | |
|       if (this.jumpPage == 1) {
 | |
|         uni.navigateTo({
 | |
|           url: "/pages/selfService/realName/realName",
 | |
|         });
 | |
|       } else {
 | |
|         uni.navigateTo({
 | |
|           url:
 | |
|             "/pages/specialArea/list?label=续约专区" +
 | |
|             "&specialArea=30" +
 | |
|             "&children=[]",
 | |
|         });
 | |
|       }
 | |
|     },
 | |
|     getService() {
 | |
|       api.agreement_expire().then((res) => {
 | |
|         if (res.code == 200) {
 | |
|           this.promptFlag = res.data.promptFlag ? false : true;
 | |
|           this.promptMsg = res.data.promptMsg;
 | |
|           this.jumpPage = res.data.jumpPage;
 | |
|           // confirmText
 | |
|           if (this.jumpPage == 1) {
 | |
|             this.confirmText = "实名认证";
 | |
|           } else {
 | |
|             this.confirmText = "立即续约";
 | |
|           }
 | |
|         }
 | |
|       });
 | |
|     },
 | |
|     callChildMethod() {
 | |
|       this.$refs.child.getUserTc();
 | |
|     },
 | |
|     callznMethod() {
 | |
|       this.$refs.child2.getUserTc2();
 | |
|     },
 | |
|     // 植树弹层
 | |
|     getTree() {
 | |
|       this.$refs.tree.getData();
 | |
|     },
 | |
|     isEmpty(v) {
 | |
|       switch (typeof v) {
 | |
|         case "undefined":
 | |
|           return true;
 | |
|         case "string":
 | |
|           if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, "").length == 0)
 | |
|             return true;
 | |
|           break;
 | |
|         case "boolean":
 | |
|           if (!v) return true;
 | |
|           break;
 | |
|         case "number":
 | |
|           if (0 === v || isNaN(v)) return true;
 | |
|           break;
 | |
|         case "object":
 | |
|           if (null === v || v.length === 0) return true;
 | |
|           for (var i in v) {
 | |
|             return false;
 | |
|           }
 | |
|           return true;
 | |
|       }
 | |
|       return false;
 | |
|     },
 | |
|     more() {
 | |
|       this.moreFlag = true;
 | |
|     },
 | |
|     openKf() {
 | |
|       let userInfo = uni.getStorageSync("User");
 | |
|       let src =
 | |
|         "https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=" +
 | |
|         userInfo.memberCode +
 | |
|         "&nickName=" +
 | |
|         userInfo.memberCode;
 | |
|       window.open(src, "_blank");
 | |
|     },
 | |
|     bannerTap(urls) {
 | |
|       if (urls) {
 | |
|         window.location.href = urls;
 | |
|       }
 | |
|     },
 | |
|     getGoodsInfo() {
 | |
|       apis.userIndex().then((res) => {
 | |
|         this.goodsList = res.data;
 | |
|       });
 | |
|     },
 | |
|     
 | |
|     goUrl(item) {
 | |
|       ban.agreementName().then((res) => {
 | |
|         if (res.data == 0) {
 | |
|           uni.navigateTo({
 | |
|             url:
 | |
|               "/pages/specialArea/details?waresCode=" +
 | |
|               item.waresCode +
 | |
|               "&specialArea=" +
 | |
|               item.specialArea,
 | |
|           });
 | |
|         } else {
 | |
|           uni.showModal({
 | |
|             title: '提示',
 | |
|             content: '请先进行实名认证',
 | |
|             success: (res) => {
 | |
|               if (res.confirm) {
 | |
|                 uni.navigateTo({
 | |
|                   url: "/pages/selfService/realName/realName",
 | |
|                 });
 | |
|               }
 | |
|             },
 | |
|           });
 | |
|         }
 | |
|       });
 | |
|     },
 | |
|     goDetails(item) {
 | |
|       if (item.preSaleStatus == 3 || item.isSale == 1) {
 | |
|       } else {
 | |
|         if (item.specialArea == 30) {
 | |
|           this.goUrl(item);
 | |
|         } else {
 | |
|           uni.navigateTo({
 | |
|             url:
 | |
|               "/pages/specialArea/details?waresCode=" +
 | |
|               item.waresCode +
 | |
|               "&specialArea=" +
 | |
|               item.specialArea,
 | |
|           });
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     navTap(item) {
 | |
|       let tapx = -1;
 | |
|       this.zoneList.forEach((items, index) => {
 | |
|         if (items.value == item.specialArea) {
 | |
|           tapx = index;
 | |
|         }
 | |
|       });
 | |
|       if (tapx == -1) {
 | |
|         this.zoneList.forEach((items, index) => {
 | |
|           items.children.forEach((ctem) => {
 | |
|             if (ctem.value == item.specialArea) {
 | |
|               if (item.specialArea == 21) {
 | |
|                 uni.navigateTo({
 | |
|                   url:
 | |
|                     "/pages/specialArea/haIndex?label=" +
 | |
|                     item.specialAreaName +
 | |
|                     "&specialArea=21&diff=1",
 | |
|                 });
 | |
|               } else {
 | |
|                 uni.navigateTo({
 | |
|                   url:
 | |
|                     "/pages/specialArea/list?label=" +
 | |
|                     items.label +
 | |
|                     "&specialArea=" +
 | |
|                     items.value +
 | |
|                     "&childArea=" +
 | |
|                     item.specialArea +
 | |
|                     "&children=" +
 | |
|                     JSON.stringify(items.children) +
 | |
|                     "&diff=1",
 | |
|                 });
 | |
|               }
 | |
|             }
 | |
|           });
 | |
|         });
 | |
|       } else {
 | |
|         if (item.specialArea == 30) {
 | |
|           this.goAreaUrl();
 | |
|         } else {
 | |
|           uni.navigateTo({
 | |
|             url:
 | |
|               "/pages/specialArea/list?label=" +
 | |
|               item.specialAreaName +
 | |
|               "&specialArea=" +
 | |
|               item.specialArea +
 | |
|               "&children=" +
 | |
|               JSON.stringify(this.zoneList[tapx].children) +
 | |
|               "&diff=1",
 | |
|           });
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     goSpecialArea() {
 | |
|       uni.navigateTo({
 | |
|         url: "/pages/index/specialArea/index",
 | |
|       });
 | |
|     },
 | |
| 
 | |
|   },
 | |
| };
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .content {
 | |
|   // background: url('~@/static/images/fBgd.jpg') no-repeat;
 | |
|   background-size: 100% 100%;
 | |
|   height: 100vh;
 | |
|   .content_a {
 | |
|     overflow: auto;
 | |
|     height: 100%;
 | |
|   }
 | |
| }
 | |
| .content1 {
 | |
|   background: url("~@/static/images/fBgd.jpg") no-repeat;
 | |
|   background-size: 100% 100%;
 | |
|   height: 100vh;
 | |
|   .content_a {
 | |
|     overflow: auto;
 | |
|     height: 100%;
 | |
|   }
 | |
| }
 | |
| .more {
 | |
|   color: #333;
 | |
|   background-color: #fff;
 | |
|   height: 80rpx;
 | |
|   line-height: 80rpx;
 | |
|   text-align: center;
 | |
|   border-radius: 30rpx;
 | |
|   width: 690rpx;
 | |
|   margin: 0 auto 30rpx auto;
 | |
| }
 | |
| 
 | |
| :v-deep uni-swiper {
 | |
|   height: 300rpx;
 | |
| }
 | |
| 
 | |
| header {
 | |
|   display: none !important;
 | |
| }
 | |
| 
 | |
| .padding_s {
 | |
|   padding: 0 20rpx;
 | |
| }
 | |
| 
 | |
| 
 | |
| 
 | |
| 
 | |
| 
 | |
| .goods-name {
 | |
|   width: 100%;
 | |
|   margin-top: 10rpx;
 | |
|   color: #333;
 | |
|   font-size: 26rpx;
 | |
|   overflow: hidden;
 | |
|   text-overflow: ellipsis;
 | |
|   display: -webkit-box;
 | |
|   -webkit-line-clamp: 2;
 | |
|   -webkit-box-orient: vertical;
 | |
|   word-break: break-word;
 | |
|   line-height: 1.4;
 | |
|   // min-height: calc(26rpx * 1.4 * 2);
 | |
| }
 | |
| 
 | |
| 
 | |
| 
 | |
| .goods-center-lists {
 | |
|   width: calc(100% - 40rpx); // height: 450rpx;
 | |
|   background: #ffffff;
 | |
|   margin-left: 20rpx;
 | |
|   margin-right: 20rpx;
 | |
|   border-radius: 15rpx;
 | |
|   border-bottom: 20rpx;
 | |
|   margin-bottom: 20rpx;
 | |
|   // padding-bottom: 30rpx;
 | |
|   position: relative;
 | |
|   .goods-flex-s {
 | |
|     display: flex;
 | |
|     padding: 20rpx;
 | |
|     .goods-img {
 | |
|       flex-shrink: 0;
 | |
|       width: 236rpx;
 | |
|       height: 236rpx;
 | |
|       image {
 | |
|         width: 100%;
 | |
|         height: 100%;
 | |
|         border-radius: 10rpx;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
|   .goods-info {
 | |
|     flex: 1;
 | |
|     padding-left: 20rpx;
 | |
|     width: 0;
 | |
|     display: flex;
 | |
|     flex-direction: column;
 | |
|     .goods-sales-wrapper {
 | |
|       display: flex;
 | |
|       flex: 1;
 | |
|       flex-direction: column;
 | |
|       justify-content: flex-end;
 | |
|       
 | |
|       .goods-sales {
 | |
|         font-size: 24rpx;
 | |
|         color: #999;
 | |
|         margin-top: 10rpx;
 | |
|       }
 | |
|       .goods-price {
 | |
|         color: #f82c1a;
 | |
|         margin-top: 10rpx;
 | |
|         font-style: 22rpx;
 | |
|         margin-left: -7rpx;
 | |
|         .price-symbol {
 | |
|           font-size: 22rpx;
 | |
|         }
 | |
|         span {
 | |
|           font-size: 36rpx;
 | |
|           font-weight: bold;
 | |
|         }
 | |
|       }
 | |
|       .goods-price1 {
 | |
|         color: #999;
 | |
|         font-size: 10px;
 | |
|         margin-left: -7rpx;
 | |
|         span {
 | |
|           font-size: 10rpx;
 | |
|         }
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| .goods-sort {
 | |
|   padding-bottom: 130rpx;
 | |
| }
 | |
| 
 | |
| .swiper-s {
 | |
|   height: 495rpx;
 | |
| }
 | |
| 
 | |
| .goods-lists {
 | |
|   width: 340rpx;
 | |
|   margin-bottom: 0rpx;
 | |
|   margin-left: 20rpx;
 | |
| }
 | |
| 
 | |
| .goods_content {
 | |
|   display: flex;
 | |
|   flex-direction: column;
 | |
|   padding: 0;
 | |
|   flex-wrap: wrap;
 | |
| }
 | |
| 
 | |
| .price {
 | |
|   height: 40rpx;
 | |
|   line-height: 40rpx;
 | |
|   background: #fde9e9;
 | |
|   border-radius: 14rpx;
 | |
|   color: #e7141a;
 | |
|   font-size: 22rpx;
 | |
|   text-align: center;
 | |
|   width: max-content;
 | |
|   padding: 0 10rpx;
 | |
|   margin: 0 auto;
 | |
| }
 | |
| 
 | |
| .goods-cen {
 | |
|   display: flex;
 | |
|   margin-top: 20rpx;
 | |
|   gap: 20rpx;
 | |
|   // justify-content: space-between;
 | |
| }
 | |
| 
 | |
| .goods-list {
 | |
|   // display: flex;
 | |
|   width: 33%;
 | |
| }
 | |
| 
 | |
| .goods-content {
 | |
|   width: 100%;
 | |
|   height: 200rpx;
 | |
|   text-align: center;
 | |
| 
 | |
|   .goods {
 | |
|     image {
 | |
|       width: 100%;
 | |
|       height: 200rpx;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| .goods-flexs {
 | |
| 
 | |
| 
 | |
|   
 | |
| 
 | |
|   .goods-view {
 | |
|     position: relative;
 | |
|     // width: 302rpx; // height: 180rpx;
 | |
|     // margin-left: 20rpx;
 | |
|     // background: #ffffff;
 | |
|     border-radius: 15rpx;
 | |
|     padding: 0 20rpx;
 | |
|     margin-bottom: 20rpx;
 | |
| 
 | |
|     .goods-top {
 | |
|       z-index: 1;
 | |
|       position: relative;
 | |
|       display: flex;
 | |
| 
 | |
|       .title {
 | |
|         color: #333;
 | |
|         font-size: 32rpx;
 | |
|         font-weight: bold;
 | |
|       }
 | |
| 
 | |
|       .lables {
 | |
|         height: 28rpx;
 | |
|         background: #f82c1a;
 | |
|         border-radius: 10rpx;
 | |
|         line-height: 24rpx;
 | |
|         font-size: 22rpx;
 | |
|         padding: 5rpx 15rpx;
 | |
|         color: #fff;
 | |
|         max-width: 100rpx;
 | |
|         margin: 5rpx 0 0 10rpx;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .lefts {
 | |
|     margin-left: 15rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| :v-deep .swiper-s .swiper-items uni-image {
 | |
|   height: 495rpx;
 | |
| }
 | |
| 
 | |
| :v-deep .uni-swiper-dots-horizontal .uni-swiper-dot {
 | |
|   margin-right: 5rpx;
 | |
| }
 | |
| 
 | |
| :v-deep .swiper-s .uni-swiper-dots .uni-swiper-dot {
 | |
|   width: 14rpx;
 | |
|   height: 14rpx;
 | |
|   background: #ffffff;
 | |
|   border-radius: 50%;
 | |
| }
 | |
| 
 | |
| :v-deep uni-swiper .uni-swiper-dot {
 | |
|   width: 40rpx;
 | |
|   height: 6rpx;
 | |
|   background: #fff !important;
 | |
|   border-radius: 10rpx;
 | |
| }
 | |
| 
 | |
| :v-deep uni-swiper .uni-swiper-dot-active {
 | |
|   width: 40rpx;
 | |
|   height: 6rpx;
 | |
|   background: #f94856 !important;
 | |
|   border-radius: 10rpx;
 | |
| }
 | |
| 
 | |
| .swiper-items {
 | |
|   // height: 495rpx;
 | |
|   // width: 340rpx;
 | |
|   border-radius: 12rpx;
 | |
| 
 | |
|   image {
 | |
|     border-radius: 12rpx;
 | |
|     height: 450rpx;
 | |
|     width: 340rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .swiper-item {
 | |
|   height: 300rpx;
 | |
|   text-align: center;
 | |
|   padding: 0 20rpx;
 | |
|   width: 100%;
 | |
|   box-sizing: border-box;
 | |
|   image {
 | |
|     border-radius: 24rpx;
 | |
|     height: 300rpx;
 | |
|     width: 100%;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .banner {
 | |
|   padding: 30rpx 0 0 0;
 | |
|   text-align: center;
 | |
|   width: 100%;
 | |
|   margin-bottom: 20rpx;
 | |
| }
 | |
| 
 | |
| .changeLanguages {
 | |
|   position: absolute;
 | |
|   right: 0rpx;
 | |
|   top: 45rpx;
 | |
| }
 | |
| 
 | |
| .select-text {
 | |
|   display: flex;
 | |
|   margin-right: 20px;
 | |
| }
 | |
| 
 | |
| .selIcon {
 | |
|   width: 40rpx;
 | |
|   height: 40rpx;
 | |
| }
 | |
| 
 | |
| .paswwrod_btn {
 | |
|   color: #666666;
 | |
|   font-size: 26rpx;
 | |
|   margin: 40rpx auto;
 | |
|   text-align: center;
 | |
| }
 | |
| 
 | |
| page {
 | |
|   background-color: #f2f2f2;
 | |
| }
 | |
| 
 | |
| .index-left {
 | |
|   font-weight: bold;
 | |
| 
 | |
|   .english {
 | |
|     font-size: 24rpx;
 | |
|     color: #333;
 | |
|   }
 | |
| 
 | |
|   .text {
 | |
|     font-size: 30rpx;
 | |
|     color: #333;
 | |
|     margin-top: 2rpx;
 | |
|     letter-spacing: 16rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .index-top {
 | |
|   // background: url('~@/static/images/tBgd.jpg') no-repeat;
 | |
|   background-size: 100% 100%;
 | |
|   // padding: 30rpx 20rpx; // height: 100rpx;
 | |
|   background-color: #fff;
 | |
|   display: flex;
 | |
|   justify-content: space-between;
 | |
|   position: fixed;
 | |
|   z-index: 10;
 | |
|   width: 100%;
 | |
|   height: 20rpx;
 | |
|   .index_t {
 | |
|     padding: 30rpx 20rpx;
 | |
|   }
 | |
| }
 | |
| .index-top1 {
 | |
|   background: url("~@/static/images/tBgd.jpg") no-repeat;
 | |
|   background-size: 100% 100%;
 | |
|   // padding: 30rpx 20rpx; // height: 100rpx;
 | |
|   // background-color: #fff;
 | |
|   display: flex;
 | |
|   justify-content: space-between;
 | |
|   position: fixed;
 | |
|   z-index: 10;
 | |
|   width: 100%;
 | |
|   height: 100%;
 | |
|   .index_t {
 | |
|     padding: 30rpx 20rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .index-right {
 | |
|   display: flex;
 | |
| }
 | |
| 
 | |
| .kf_A {
 | |
|   position: fixed;
 | |
|   background: rgba(256, 256, 256, 0.8);
 | |
|   width: 62px;
 | |
|   // height: 60px;
 | |
|   z-index: 10;
 | |
|   right: 40rpx;
 | |
|   top: 11%;
 | |
|   border-radius: 10px;
 | |
|   text-align: center;
 | |
|   padding: 20rpx 0;
 | |
| }
 | |
| 
 | |
| .kf {
 | |
|   image {
 | |
|     width: 48rpx;
 | |
|     height: 48rpx;
 | |
|     margin-bottom: 10rpx;
 | |
|   }
 | |
| 
 | |
|   font-size: 10px;
 | |
|   color: #333333;
 | |
| }
 | |
| .fly {
 | |
|   position: absolute;
 | |
|   width: 100%;
 | |
|   height: 100%;
 | |
|   top: 0;
 | |
|   background: #eee;
 | |
|   opacity: 0.5;
 | |
|   z-index: 1;
 | |
| }
 | |
| </style>
 |