|
|
@@ -1,447 +1,394 @@
|
|
|
<template>
|
|
|
- <div class="Appindex">
|
|
|
- <!-- 顶部 -->
|
|
|
- <view class="head">
|
|
|
- <!-- 搜索框 -->
|
|
|
- <!-- <view class="head_search">
|
|
|
+ <div class="Appindex">
|
|
|
+ <!-- 顶部 -->
|
|
|
+ <view class="head">
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <!-- <view class="head_search">
|
|
|
<text class="iconfont"></text>
|
|
|
<text class="search_text">请输入搜索关键字</text>
|
|
|
</view> -->
|
|
|
- <!-- 搜索框-end -->
|
|
|
-
|
|
|
- <!-- 轮播图 -->
|
|
|
- <swiper-banner
|
|
|
- :radius="1"
|
|
|
- imgScale="5:2"
|
|
|
- :imgArr="BannerImg"
|
|
|
- :duration="1000"
|
|
|
- :interval="5000"
|
|
|
- :circular="true"
|
|
|
- :autoplay="true"
|
|
|
- @goList="goList"
|
|
|
- :indicator-dots="true"
|
|
|
- indicator-active-color="#12B280"
|
|
|
- indicator-color="rgba(255, 255, 255, .82)"
|
|
|
- ></swiper-banner>
|
|
|
- <!-- 轮播图-end -->
|
|
|
-
|
|
|
- <!-- 公告 -->
|
|
|
- <view class="head_notice clearfix">
|
|
|
- <view class="notice_title">
|
|
|
- <image class="gg_img" src="@/static/img/gg.png"></image>
|
|
|
+ <!-- 搜索框-end -->
|
|
|
+ <!-- 轮播图 -->
|
|
|
+ <swiper-banner :radius="1" imgScale="5:2" :imgArr="BannerImg" :duration="1000" :interval="5000" :circular="true" :autoplay="true" @goList="goList" :indicator-dots="true" indicator-active-color="#12B280" indicator-color="rgba(255, 255, 255, .82)"></swiper-banner>
|
|
|
+ <!-- 轮播图-end -->
|
|
|
+ <!-- 公告 -->
|
|
|
+ <view class="head_notice clearfix">
|
|
|
+ <view class="notice_title">
|
|
|
+ <image class="gg_img" src="@/static/img/gg.png"></image>
|
|
|
+ </view>
|
|
|
+ <swiper class="notice_swiper" vertical autoplay circular :interval="5000" :duration="1000">
|
|
|
+ <swiper-item v-for="(item, index) in not_list" :key="index" @click="toDetail(item.article_id)">
|
|
|
+ <text class="not_list ellipsis1">{{ item.title }}</text>
|
|
|
+ <text class="not_ico iconfont"></text>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <!-- 公告-end -->
|
|
|
+ <!-- 金刚区 -->
|
|
|
+ <view class="head_area">
|
|
|
+ <view class="area_list" v-for="(item, index) in area_list" :key="index" @click="setPageUrl(item)">
|
|
|
+ <image class="area_img" :src="item.url"></image>
|
|
|
+ <view class="area_name">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 金刚区-end -->
|
|
|
+ <!-- 活动 -->
|
|
|
+ <view class="activity" v-if="spc_list.length > 0">
|
|
|
+ <image class="act_one_img" :src="spc_list[0].url" @click="setPageUrl({ type: 4 })" mode=""></image>
|
|
|
+ <view class="act_other">
|
|
|
+ <image class="act_two_img" :src="spc_list[1].url" mode=""></image>
|
|
|
+ <image class="act_two_img" :src="spc_list[2].url" mode="" @click="goNoticeList"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 活动-end -->
|
|
|
</view>
|
|
|
- <swiper
|
|
|
- class="notice_swiper"
|
|
|
- vertical
|
|
|
- autoplay
|
|
|
- circular
|
|
|
- :interval="5000"
|
|
|
- :duration="1000"
|
|
|
- >
|
|
|
- <swiper-item
|
|
|
- v-for="(item, index) in not_list"
|
|
|
- :key="index"
|
|
|
- @click="toDetail(item.article_id)"
|
|
|
- >
|
|
|
- <text class="not_list ellipsis1">{{ item.title }}</text>
|
|
|
- <text class="not_ico iconfont"></text>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
- <!-- 公告-end -->
|
|
|
-
|
|
|
- <!-- 金刚区 -->
|
|
|
- <view class="head_area">
|
|
|
- <view
|
|
|
- class="area_list"
|
|
|
- v-for="(item, index) in area_list"
|
|
|
- :key="index"
|
|
|
- @click="setPageUrl(item)"
|
|
|
- >
|
|
|
- <image class="area_img" :src="item.url"></image>
|
|
|
- <view class="area_name">{{ item.name }}</view>
|
|
|
+ <view class="list_bar">
|
|
|
+ <div class="tit">猜你喜欢</div>
|
|
|
+ <view class="product-list">
|
|
|
+ <view class="product" v-for="(i, s) in productList" :key="s" @click="NavToGoodsDetail(i.id, i.type)">
|
|
|
+ <view class="image-view">
|
|
|
+ <image class="product-image" :src="i.original_img"></image>
|
|
|
+ </view>
|
|
|
+ <view :class="['product-title', 'ellipsis1']">{{ i.goods_name }}</view>
|
|
|
+ <view class="product-price">
|
|
|
+ <text class="product-price-original"><text class="product-unit">￥</text>{{ i.price }}</text>
|
|
|
+ <!-- <text class="product-price-favour">￥{{i.originalPrice}}</text> -->
|
|
|
+ <!-- <text class="product-tip">{{i.tip}}</text> -->
|
|
|
+ </view>
|
|
|
+ <view class="product-txt">赠送{{ i.give_integral ? i.give_integral + "批发积分" : i.give_cha_bao + "茶宝" }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="fz_w_text mar_t20 mar_b20">让数字经济赋能美好生活！</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <!-- 金刚区-end -->
|
|
|
-
|
|
|
- <!-- 活动 -->
|
|
|
- <view class="activity" v-if="spc_list.length > 0">
|
|
|
- <image
|
|
|
- class="act_one_img"
|
|
|
- :src="spc_list[0].url"
|
|
|
- @click="setPageUrl({ type: 4 })"
|
|
|
- mode=""
|
|
|
- ></image>
|
|
|
- <view class="act_other">
|
|
|
- <image class="act_two_img" :src="spc_list[1].url" mode=""></image>
|
|
|
- <image class="act_two_img" :src="spc_list[2].url" mode="" @click="goNoticeList"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 活动-end -->
|
|
|
- </view>
|
|
|
- <view class="list_bar">
|
|
|
- <div class="tit">猜你喜欢</div>
|
|
|
- <view class="product-list">
|
|
|
- <view
|
|
|
- class="product"
|
|
|
- v-for="(i, s) in productList"
|
|
|
- :key="s"
|
|
|
- @click="NavToGoodsDetail(i.id, i.type)"
|
|
|
- >
|
|
|
- <view class="image-view">
|
|
|
- <image class="product-image" :src="i.original_img"></image>
|
|
|
- </view>
|
|
|
- <view :class="['product-title', 'ellipsis1']">{{
|
|
|
- i.goods_name
|
|
|
- }}</view>
|
|
|
- <view class="product-price">
|
|
|
- <text class="product-price-original"
|
|
|
- ><text class="product-unit">￥</text>{{ i.price }}</text
|
|
|
- >
|
|
|
- <!-- <text class="product-price-favour">￥{{i.originalPrice}}</text> -->
|
|
|
- <!-- <text class="product-tip">{{i.tip}}</text> -->
|
|
|
- </view>
|
|
|
- <view class="product-txt"
|
|
|
- >赠送{{
|
|
|
- i.give_integral
|
|
|
- ? i.give_integral + "批发积分"
|
|
|
- : i.give_cha_bao + "茶宝"
|
|
|
- }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- <view class="fz_w_text mar_t20 mar_b20">让数字经济赋能美好生活！</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
let app = getApp();
|
|
|
var appEv = app.$vm.$options;
|
|
|
-// import goodslist from "@/components/goodsList"; //商品列表
|
|
|
import swiperBanner from "@/components/swiperBanner"; //轮播
|
|
|
import { get, post } from "@/request/api.js";
|
|
|
export default {
|
|
|
- name: "Appindex",
|
|
|
- components: {
|
|
|
- // goodslist, //商品列表
|
|
|
- swiperBanner, //轮播
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- BannerImg: [], // 轮播图列表
|
|
|
- not_list: [], // 公告列表
|
|
|
- // 金刚区
|
|
|
- area_list: [
|
|
|
- {
|
|
|
- name: "零售区",
|
|
|
- url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/cart.png",
|
|
|
- type: 1,
|
|
|
+ name: "Appindex",
|
|
|
+ components: {
|
|
|
+ swiperBanner, //轮播
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ BannerImg: [], // 轮播图列表
|
|
|
+ not_list: [], // 公告列表
|
|
|
+ // 金刚区
|
|
|
+ area_list: [{
|
|
|
+ name: "零售区",
|
|
|
+ url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/cart.png",
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "批发区",
|
|
|
+ url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/wholesale.png",
|
|
|
+ type: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "精品优选",
|
|
|
+ url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/preferred.png",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "茶宝兑换",
|
|
|
+ url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/integral.png",
|
|
|
+ type: 5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ spc_list: [{
|
|
|
+ url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/ShuZiTea/ShuZiTeaHT/202210/f70cd8e0-e468-45eb-a9f7-2c42713cd607.jpg",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/ShuZiTea/ShuZiTeaHT/202210/b13c0186-fdfc-4b87-b466-5c9fc336cc54.jpg",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/ShuZiTea/ShuZiTeaHT/202210/49886d9c-ce5a-49ca-a281-12910541344f.jpg",
|
|
|
+ },
|
|
|
+ ], //活动列表
|
|
|
+ productList: [], //商品数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {},
|
|
|
+ onLaunch() {},
|
|
|
+ onShow() {
|
|
|
+ this.loadData();
|
|
|
+ this.getBanner(); //获取轮播图
|
|
|
+ this.getAnnounce(); //获取公告列表
|
|
|
+ },
|
|
|
+ onHide() {},
|
|
|
+ methods: {
|
|
|
+ loadData() {
|
|
|
+ post("goods/indexGoods").then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.productList = res.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- {
|
|
|
- name: "批发区",
|
|
|
- url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/wholesale.png",
|
|
|
- type: 2,
|
|
|
+ // 跳转到商品详情页
|
|
|
+ NavToGoodsDetail(id, type) {
|
|
|
+ this.goto("/pages/product/p_details", { id, type });
|
|
|
},
|
|
|
- {
|
|
|
- name: "精品优选",
|
|
|
- url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/preferred.png",
|
|
|
- type: 3,
|
|
|
+ goNoticeList() {
|
|
|
+ this.goto("/pages/consultation-list/index");
|
|
|
},
|
|
|
- {
|
|
|
- name: "茶宝兑换",
|
|
|
- url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/integral.png",
|
|
|
- type: 5,
|
|
|
+ // 获取轮播图
|
|
|
+ getBanner() {
|
|
|
+ post("banner").then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.BannerImg = [];
|
|
|
+ res.data.data.forEach((e) => {
|
|
|
+ if (e.image) this.BannerImg.push(e.image);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- ],
|
|
|
- spc_list: [
|
|
|
- {
|
|
|
- url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/ShuZiTea/ShuZiTeaHT/202210/f70cd8e0-e468-45eb-a9f7-2c42713cd607.jpg",
|
|
|
+ // 获取公告列表
|
|
|
+ getAnnounce() {
|
|
|
+ let data = {
|
|
|
+ is_index: 1
|
|
|
+ }
|
|
|
+ post("notice", data).then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.not_list = res.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- {
|
|
|
- url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/ShuZiTea/ShuZiTeaHT/202210/b13c0186-fdfc-4b87-b466-5c9fc336cc54.jpg",
|
|
|
+ //跳转公告详情
|
|
|
+ toDetail(id) {
|
|
|
+ this.goto("/pages/notice/detail", { id });
|
|
|
},
|
|
|
- {
|
|
|
- url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/ShuZiTea/ShuZiTeaHT/202210/49886d9c-ce5a-49ca-a281-12910541344f.jpg",
|
|
|
+ // 轮播图跳转
|
|
|
+ goList(e) {},
|
|
|
+ // 金刚区跳转
|
|
|
+ setPageUrl(item) {
|
|
|
+ if ([1, 3, 4].includes(item.type)) {
|
|
|
+ this.goto("/pages/product/productRetail", { type: item.type });
|
|
|
+ } else if (item.type == 2) {
|
|
|
+ this.goto("/pages/product/productWholesale", { type: 2 });
|
|
|
+ } else if (item.type == 5) {
|
|
|
+ this.goto("/pages/product/productTeaBaby", { type: item.type });
|
|
|
+ } else {
|
|
|
+ appEv.errTips("此功能暂未开放！");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
},
|
|
|
- ], //活动列表
|
|
|
- productList: [], //商品数据
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(option) {},
|
|
|
- onLaunch() {},
|
|
|
- onShow() {
|
|
|
- this.loadData();
|
|
|
- this.getBanner(); //获取轮播图
|
|
|
- this.getAnnounce(); //获取公告列表
|
|
|
- },
|
|
|
- onHide() {},
|
|
|
- methods: {
|
|
|
- loadData() {
|
|
|
- post("goods/indexGoods").then((res) => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.productList = res.data.data;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 跳转到商品详情页
|
|
|
- NavToGoodsDetail(id, type) {
|
|
|
- this.goto("/pages/product/p_details", { id, type });
|
|
|
- },
|
|
|
- goNoticeList(){
|
|
|
- this.goto("/pages/consultation-list/index");
|
|
|
- },
|
|
|
- // 获取轮播图
|
|
|
- getBanner() {
|
|
|
- post("banner").then((res) => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.BannerImg = [];
|
|
|
- res.data.data.forEach((e) => {
|
|
|
- if (e.image) this.BannerImg.push(e.image);
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
},
|
|
|
- // 获取公告列表
|
|
|
- getAnnounce() {
|
|
|
- let data = {
|
|
|
- is_index:1
|
|
|
- }
|
|
|
- post("notice",data).then((res) => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.not_list =res.data.data;
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ onShareAppMessage: function() {
|
|
|
+ let userinfo = uni.getStorageSync("userinfo");
|
|
|
+ var path = "/pages/index/index?agentId=1";
|
|
|
+ if (userinfo.user_id) {
|
|
|
+ path = "/pages/index/index?agentId=" + userinfo.user_id;
|
|
|
}
|
|
|
- });
|
|
|
+ var title = `让数字经济赋能美好生活！`;
|
|
|
+ return {
|
|
|
+ title: title,
|
|
|
+ path: path,
|
|
|
+ };
|
|
|
},
|
|
|
- //跳转公告详情
|
|
|
- toDetail(id) {
|
|
|
- this.goto("/pages/notice/detail", { id });
|
|
|
- },
|
|
|
- // 轮播图跳转
|
|
|
- goList(e) {},
|
|
|
- // 金刚区跳转
|
|
|
- setPageUrl(item) {
|
|
|
- if ([1, 3, 4].includes(item.type)) {
|
|
|
- this.goto("/pages/product/productRetail", { type: item.type });
|
|
|
- } else if (item.type == 2) {
|
|
|
- this.goto("/pages/product/productWholesale", { type: 2 });
|
|
|
- } else if (item.type == 5) {
|
|
|
- this.goto("/pages/product/productTeaBaby", { type: item.type });
|
|
|
- } else {
|
|
|
- appEv.errTips("此功能暂未开放！");
|
|
|
- return false;
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {},
|
|
|
- watch: {},
|
|
|
- onShareAppMessage: function () {
|
|
|
- let userinfo = uni.getStorageSync("userinfo");
|
|
|
- var path = "/pages/index/index?agentId=1";
|
|
|
- if (userinfo.user_id) {
|
|
|
- path = "/pages/index/index?agentId=" + userinfo.user_id;
|
|
|
- }
|
|
|
- var title = `让数字经济赋能美好生活！`;
|
|
|
- return {
|
|
|
- title: title,
|
|
|
- path: path,
|
|
|
- };
|
|
|
- },
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang='scss'>
|
|
|
.head {
|
|
|
- padding: 12rpx 28rpx;
|
|
|
+ padding: 12rpx 28rpx;
|
|
|
}
|
|
|
|
|
|
.head_search {
|
|
|
- width: 100%;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- background: #f3f5f7;
|
|
|
- border-radius: 32rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #bbbbbb;
|
|
|
- margin-bottom: 26rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ background: #f3f5f7;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #bbbbbb;
|
|
|
+ margin-bottom: 26rpx;
|
|
|
|
|
|
- .search_text {
|
|
|
- margin-left: 14rpx;
|
|
|
- }
|
|
|
+ .search_text {
|
|
|
+ margin-left: 14rpx;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.head_notice {
|
|
|
- margin: 30rpx 0;
|
|
|
+ margin: 30rpx 0;
|
|
|
|
|
|
- .notice_title {
|
|
|
- width: 130rpx;
|
|
|
- height: 40rpx;
|
|
|
- float: left;
|
|
|
+ .notice_title {
|
|
|
+ width: 130rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ float: left;
|
|
|
|
|
|
- .gg_img {
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
+ .gg_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .notice_swiper {
|
|
|
- height: 40rpx;
|
|
|
- padding-left: 20rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- width: calc(100% - 130rpx);
|
|
|
+ .notice_swiper {
|
|
|
+ height: 40rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: calc(100% - 130rpx);
|
|
|
|
|
|
- .not_list {
|
|
|
- width: calc(100% - 50rpx);
|
|
|
- }
|
|
|
+ .not_list {
|
|
|
+ width: calc(100% - 50rpx);
|
|
|
+ }
|
|
|
|
|
|
- .not_ico {
|
|
|
- width: 30rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
+ .not_ico {
|
|
|
+ width: 30rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
|
|
|
- .not_list,
|
|
|
- .not_ico {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
+ .not_list,
|
|
|
+ .not_ico {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
// 金刚区
|
|
|
.head_area {
|
|
|
- margin: 20rpx 0 20rpx;
|
|
|
- padding: 20rpx 0;
|
|
|
- border-radius: 18rpx;
|
|
|
- box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.08);
|
|
|
+ margin: 20rpx 0 20rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-radius: 18rpx;
|
|
|
+ box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.08);
|
|
|
|
|
|
- .area_list {
|
|
|
- display: inline-block;
|
|
|
- width: 25%;
|
|
|
- text-align: center;
|
|
|
+ .area_list {
|
|
|
+ display: inline-block;
|
|
|
+ width: 25%;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .area_img {
|
|
|
- width: 46rpx;
|
|
|
- height: 46rpx;
|
|
|
- margin-bottom: 12rpx;
|
|
|
- }
|
|
|
+ .area_img {
|
|
|
+ width: 46rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
|
|
|
- .area_name {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #474747;
|
|
|
+ .area_name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #474747;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
// 金刚区-end
|
|
|
|
|
|
// 活动
|
|
|
.activity {
|
|
|
- .act_one_img {
|
|
|
- display: inline-block;
|
|
|
- width: 300rpx;
|
|
|
- height: 378rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
+ .act_one_img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 300rpx;
|
|
|
+ height: 378rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
|
|
|
- .act_other {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 300rpx - 10rpx);
|
|
|
- }
|
|
|
+ .act_other {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 300rpx - 10rpx);
|
|
|
+ }
|
|
|
|
|
|
- .act_two_img {
|
|
|
- width: 100%;
|
|
|
- height: 185rpx;
|
|
|
- }
|
|
|
+ .act_two_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 185rpx;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 活动-end
|
|
|
|
|
|
// 商品列表
|
|
|
.list_bar {
|
|
|
- .tit {
|
|
|
- text-align: center;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #121212;
|
|
|
- padding: 40rpx 0 20rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .tit {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #121212;
|
|
|
+ padding: 40rpx 0 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.product-list {
|
|
|
- padding: 0 20rpx;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- flex-wrap: wrap;
|
|
|
- flex-direction: row;
|
|
|
- .product {
|
|
|
- // width: 50%;
|
|
|
- // padding: 20rpx 10rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- margin-bottom: 20rpx;
|
|
|
- width: 48.5%;
|
|
|
- padding-bottom: 6px;
|
|
|
- // border: 1px solid #eee;
|
|
|
- border-radius: 5px;
|
|
|
- box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.08);
|
|
|
- &:nth-child(2n) {
|
|
|
- margin-left: 3%;
|
|
|
+ width: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ .product {
|
|
|
+ // width: 50%;
|
|
|
+ // padding: 20rpx 10rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ width: 48.5%;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ // border: 1px solid #eee;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.08);
|
|
|
+
|
|
|
+ &:nth-child(2n) {
|
|
|
+ margin-left: 3%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .product-image {
|
|
|
- border-radius: 10rpx 10rpx 0 0;
|
|
|
- width: 100%;
|
|
|
- height:42.3vw;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
+ .product-image {
|
|
|
+ border-radius: 10rpx 10rpx 0 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 42.3vw;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
|
|
|
- .product-title {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- line-height: 1.5;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #121212;
|
|
|
- }
|
|
|
+ .product-title {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 1.5;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #121212;
|
|
|
+ }
|
|
|
|
|
|
- .product-price {
|
|
|
- color: #121212;
|
|
|
- font-size: 28rpx;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
+ .product-price {
|
|
|
+ color: #121212;
|
|
|
+ font-size: 28rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
|
|
|
- .product-price-original {
|
|
|
- color: #18bb88;
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
+ .product-price-original {
|
|
|
+ color: #18bb88;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
|
|
|
- .product-price-favour {
|
|
|
- color: #888888;
|
|
|
- text-decoration: line-through;
|
|
|
- margin-left: 10upx;
|
|
|
- }
|
|
|
+ .product-price-favour {
|
|
|
+ color: #888888;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
|
|
|
- .product-tip {
|
|
|
- position: absolute;
|
|
|
- right: 10upx;
|
|
|
- background-color: #ff3333;
|
|
|
- color: #ffffff;
|
|
|
- padding: 0 10upx;
|
|
|
- border-radius: 5upx;
|
|
|
- }
|
|
|
+ .product-tip {
|
|
|
+ position: absolute;
|
|
|
+ right: 10upx;
|
|
|
+ background-color: #ff3333;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 0 10upx;
|
|
|
+ border-radius: 5upx;
|
|
|
+ }
|
|
|
|
|
|
- .product-unit {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #18bb88;
|
|
|
- }
|
|
|
+ .product-unit {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #18bb88;
|
|
|
+ }
|
|
|
|
|
|
- .product-txt {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #787878;
|
|
|
- }
|
|
|
+ .product-txt {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #787878;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
DaMowang