776 lines
22 KiB
Vue
776 lines
22 KiB
Vue
<template>
|
||
<view class="distributor" :style="viewColor">
|
||
<view class="headerBg" :style="{'background-image': `url(${domain}/static/diy/distribution${keyColor}.png)`}">
|
||
<view v-if="openActivity" class="explain" @click="explain">分销说明</view>
|
||
<view class="picTxt acea-row row-middle">
|
||
<view class="pictrue">
|
||
<image class="avatar" :src='userInfo.avatar' v-if="userInfo.avatar"></image>
|
||
<image v-else class="avatar" src="/static/images/f.png" mode=""></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="name line1">{{userInfo.nickname}}</view>
|
||
<view class="info line1">直接推广人越多，获得的奖励越多哦！</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- menu -->
|
||
<view class='nav acea-row' v-if="menus.length && openActivity">
|
||
<block v-for="(item,index) in menus" :key="index">
|
||
<view class='item'>
|
||
<view class='pictrue' style="width: 90rpx; height: 90rpx; background-color: #FFF8EC; border-radius: 100%; text-align: center;">
|
||
<image :src='item.img'></image>
|
||
</view>
|
||
<view class="menu-txt area-row">{{item.title}}</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<!-- 推荐礼包 -->
|
||
<view class="recommend" v-if="openActivity">
|
||
<view v-if="fastList.length > 0" class="public_title acea-row row-center-wrapper">
|
||
<image :src="domain+'/static/diy/linefx'+keyColor+'.png'"></image>
|
||
<view class="name">推荐礼包</view>
|
||
<image :src="domain+'/static/diy/linefx'+keyColor+'.png'" class="right"></image>
|
||
</view>
|
||
<view v-if="fastList.length > 0" class='scroll-product'>
|
||
<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
|
||
<block v-for="(item,index) in fastList" :key='index'>
|
||
<view class="itemCon">
|
||
<view class="item acea-row row-right">
|
||
<view class="picTxt acea-row row-between-wrapper" @click="godDetail(item)">
|
||
<view class="pictrue">
|
||
<image :src="item.image"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="name line1">{{item.store_name}}</view>
|
||
<!-- <text v-if="item.merchant && item.merchant.type_name" class="font-bg-red mt8 b-color">{{item.merchant.type_name}}</text>
|
||
<text v-else-if="item.merchant && item.merchant.is_trader" class="font-bg-red mt8 b-color">自营</text> -->
|
||
<view class="acea-row row-bottom price_count">
|
||
<view class="money p-color">￥<text class="num">{{item.price}}</text></view>
|
||
<view v-if="item.show_svip_info&&item.show_svip_info.show_svip_price&&item.svip_price" class="acea-row row-middle svip-count">
|
||
<text class='vip-money'>￥{{item.svip_price}}</text>
|
||
<view class="vipImg">
|
||
<image :src="`${domain}/static/images/svip.png`"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="circular"></view>
|
||
<view class="open b-color" @click="goBuy(item)">立即开通</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<view class="pin" v-if="openActivity">
|
||
<view class="public_title acea-row row-center-wrapper">
|
||
<image :src="domain+'/static/diy/linefx'+keyColor+'.png'"></image>
|
||
<view class="name">分销礼包</view>
|
||
<image :src="domain+'/static/diy/linefx'+keyColor+'.png'" class="right"></image>
|
||
</view>
|
||
<view class="list">
|
||
<view class="item acea-row row-between-wrapper" v-for="(item, index) in distribution" :key='index' @click="godDetail(item)">
|
||
<view class="pictrue">
|
||
<image :src="item.image"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="name line1">
|
||
<!-- <text v-if="item.merchant && item.merchant.type_name" class="font-bg-red ml8 b-color">{{item.merchant.type_name}}</text>
|
||
<text v-else-if="item.merchant && item.merchant.is_trader" class="font-bg-red ml8 b-color">自营</text> -->
|
||
{{item.store_name}}
|
||
</view>
|
||
<view class="acea-row">
|
||
<view class="money p-color">￥<text class="num">{{item.price}}</text></view>
|
||
<view v-if="item.show_svip_info&&item.show_svip_info.show_svip_price&&item.svip_price" class="acea-row row-middle svip-count">
|
||
<text class='vip-money'>￥{{item.svip_price}}</text>
|
||
<view class="vipImg">
|
||
<image :src="`${domain}/static/images/svip.png`"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="open b-color" @click.stop="goBuy(item)">立即开通</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='loadingicon acea-row row-center-wrapper' v-if='distribution.length > 0 '>
|
||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
||
</view>
|
||
</view>
|
||
<view class="explainTxt" :class="explainShow?'on':''">
|
||
<view class="name">分销说明<text class="iconfont icon-guanbi" @click="close"></text></view>
|
||
<view class="conter">{{explainTxt}}</view>
|
||
</view>
|
||
<view class="mask" v-if="explainShow"></view>
|
||
<!-- 组件 -->
|
||
<productWindow :attr="attr" :isShow='1' :iSplus='1' :destri='1' :svipPrice="true" @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
|
||
@attrVal="attrVal" @iptCartNum="iptCartNum" @goCat="goPay" id='product-window'></productWindow>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
import { getUserInfo } from '@/api/user.js';
|
||
import { goShopDetail } from '@/libs/order.js'
|
||
import { postCartAdd } from '@/api/store.js';
|
||
import { bagExplain, bagRecommend, productBag, getProductDetail } from '@/api/store.js';
|
||
import ProductWindow from "@/components/productWindow";
|
||
import { mapGetters } from "vuex";
|
||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||
export default {
|
||
components: {
|
||
ProductWindow
|
||
},
|
||
computed: mapGetters(['viewColor','keyColor']),
|
||
data() {
|
||
return {
|
||
domain: HTTP_REQUEST_URL,
|
||
explainShow: false,
|
||
menus: [],
|
||
fastList: [],
|
||
userInfo: {},
|
||
distribution: [],
|
||
explainTxt: '',
|
||
attr: {
|
||
cartAttr: false,
|
||
productAttr: [],
|
||
productSelect: {}
|
||
},
|
||
productValue: [], //系统属性
|
||
storeInfo: {},
|
||
attrValue: '', //已选属性
|
||
attrTxt: '请选择', //属性页面提示
|
||
cart_num: 1, //购买数量
|
||
id: 0, //产品id
|
||
loadend: false,
|
||
loading: false,
|
||
loadTitle: '加载更多',
|
||
where: {
|
||
page: 1,
|
||
limit: 20,
|
||
},
|
||
openActivity: false,
|
||
}
|
||
},
|
||
onLoad() {},
|
||
onShow: function() {
|
||
this.bagExplain();
|
||
this.productBag();
|
||
this.bagRecommend();
|
||
this.getUserInfo();
|
||
},
|
||
// 滚动到底部
|
||
onReachBottom() {
|
||
this.productBag();
|
||
},
|
||
methods: {
|
||
goBuy: function(item) {
|
||
let that = this;
|
||
that.id = item.product_id;
|
||
that.getGoodsDetails(item);
|
||
},
|
||
onMyEvent: function() {
|
||
this.$set(this.attr, 'cartAttr', false);
|
||
},
|
||
/**
|
||
* 获取产品详情
|
||
*
|
||
*/
|
||
getGoodsDetails: function(item) {
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
});
|
||
let that = this;
|
||
getProductDetail(item.product_id).then(res => {
|
||
uni.hideLoading();
|
||
that.attr.cartAttr = true;
|
||
let storeInfo = res.data;
|
||
that.$set(that, 'storeInfo', storeInfo);
|
||
that.$set(that.attr, 'productAttr', res.data.attr);
|
||
that.$set(that, 'productValue', res.data.sku);
|
||
that.DefaultSelect();
|
||
}).catch(err => {
|
||
uni.hideLoading();
|
||
})
|
||
},
|
||
/**
|
||
* 属性变动赋值
|
||
*
|
||
*/
|
||
ChangeAttr: function(res) {
|
||
let productSelect = this.productValue[res];
|
||
if (productSelect && productSelect.stock > 0) {
|
||
this.$set(this.attr.productSelect, "image", productSelect.image);
|
||
this.$set(this.attr.productSelect, "price", productSelect.price);
|
||
this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
|
||
this.$set(this.attr.productSelect, "stock", productSelect.stock);
|
||
this.$set(this.attr.productSelect, "unique", productSelect.unique);
|
||
this.$set(this.attr.productSelect, "cart_num", 1);
|
||
this.$set(this, "attrValue", res);
|
||
this.$set(this, "attrTxt", "已选择");
|
||
} else {
|
||
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
|
||
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
|
||
this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
|
||
this.$set(this.attr.productSelect, "stock", 0);
|
||
this.$set(this.attr.productSelect, "unique", "");
|
||
this.$set(this.attr.productSelect, "cart_num", 0);
|
||
this.$set(this, "attrValue", "");
|
||
this.$set(this, "attrTxt", "请选择");
|
||
}
|
||
},
|
||
/**
|
||
* 默认选中属性
|
||
*
|
||
*/
|
||
DefaultSelect: function() {
|
||
let productAttr = this.attr.productAttr;
|
||
let value = [];
|
||
let arr = [];
|
||
let unSortArr = [];
|
||
for (var key in this.productValue) {
|
||
if (this.productValue[key].stock > 0) {
|
||
value = this.attr.productAttr.length ? key.split(",") : [];
|
||
break;
|
||
}
|
||
}
|
||
for (let i = 0; i < productAttr.length; i++) {
|
||
this.$set(productAttr[i], "index", value[i]);
|
||
}
|
||
//sort();排序函数:数字-英文-汉字；
|
||
let productSelect = this.productValue[value.join(",")];
|
||
if (productSelect && productAttr.length) {
|
||
this.$set(
|
||
this.attr.productSelect,
|
||
"store_name",
|
||
this.storeInfo.store_name
|
||
);
|
||
this.$set(this.attr.productSelect, "image", productSelect.image);
|
||
this.$set(this.attr.productSelect, "price", productSelect.price);
|
||
this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
|
||
this.$set(this.attr.productSelect, "stock", productSelect.stock);
|
||
this.$set(this.attr.productSelect, "unique", productSelect.unique);
|
||
|
||
this.$set(this, "attrValue", value.join(","));
|
||
this.$set(this, "attrTxt", "已选择");
|
||
if (productSelect.stock == 0) {
|
||
this.$set(this.attr.productSelect, "cart_num", 0);
|
||
} else {
|
||
this.$set(this.attr.productSelect, "cart_num", 1);
|
||
}
|
||
} else if (!productSelect && productAttr.length) {
|
||
this.$set(
|
||
this.attr.productSelect,
|
||
"store_name",
|
||
this.storeInfo.store_name
|
||
);
|
||
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
|
||
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
|
||
this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
|
||
this.$set(this.attr.productSelect, "stock", 0);
|
||
this.$set(this.attr.productSelect, "unique", "");
|
||
this.$set(this.attr.productSelect, "cart_num", 0);
|
||
this.$set(this, "attrValue", "");
|
||
this.$set(this, "attrTxt", "请选择");
|
||
} else if (!productSelect && !productAttr.length) {
|
||
this.$set(
|
||
this.attr.productSelect,
|
||
"store_name",
|
||
this.storeInfo.store_name
|
||
);
|
||
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
|
||
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
|
||
this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
|
||
this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
|
||
this.$set(
|
||
this.attr.productSelect,
|
||
"unique",
|
||
this.storeInfo.unique || ""
|
||
);
|
||
this.$set(this.attr.productSelect, "cart_num", 1);
|
||
this.$set(this, "attrValue", "");
|
||
this.$set(this, "attrTxt", "请选择");
|
||
} else if (productSelect && !productAttr.length) {
|
||
this.$set(
|
||
this.attr.productSelect,
|
||
"store_name",
|
||
this.storeInfo.store_name
|
||
);
|
||
this.$set(this.attr.productSelect, "image", productSelect.image);
|
||
this.$set(this.attr.productSelect, "price", productSelect.price);
|
||
this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
|
||
this.$set(this.attr.productSelect, "stock", productSelect.stock);
|
||
this.$set(this.attr.productSelect, "unique", productSelect.unique);
|
||
this.$set(this, "attrValue", value.join(","));
|
||
this.$set(this, "attrTxt", "已选择");
|
||
if (productSelect.stock == 0) {
|
||
this.$set(this.attr.productSelect, "cart_num", 0);
|
||
} else {
|
||
this.$set(this.attr.productSelect, "cart_num", 1);
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 购物车数量加和数量减
|
||
*
|
||
*/
|
||
ChangeCartNum: function(changeValue) {
|
||
//changeValue:是否 加|减
|
||
//获取当前变动属性
|
||
let productSelect = this.productValue[this.attrValue];
|
||
//如果没有属性,赋值给商品默认库存
|
||
if (productSelect === undefined && !this.attr.productAttr.length)
|
||
productSelect = this.attr.productSelect;
|
||
//无属性值即库存为0；不存在加减；
|
||
if (productSelect === undefined) return;
|
||
let stock = productSelect.stock || 0;
|
||
let num = this.attr.productSelect;
|
||
if (changeValue) {
|
||
num.cart_num++;
|
||
if (num.cart_num > stock) {
|
||
this.$set(this.attr.productSelect, "cart_num", stock);
|
||
this.$set(this, "cart_num", stock);
|
||
}
|
||
} else {
|
||
num.cart_num--;
|
||
if (num.cart_num < 1) {
|
||
this.$set(this.attr.productSelect, "cart_num", 1);
|
||
this.$set(this, "cart_num", 1);
|
||
}
|
||
}
|
||
},
|
||
attrVal(val) {
|
||
this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val.indexn]);
|
||
},
|
||
/**
|
||
* 购物车手动填写
|
||
*
|
||
*/
|
||
iptCartNum: function(e) {
|
||
this.$set(this.attr.productSelect, 'cart_num', e);
|
||
},
|
||
// 立即购买
|
||
goPay() {
|
||
let that = this,
|
||
productSelect = that.productValue[this.attrValue];
|
||
if (
|
||
that.attr.productAttr.length &&
|
||
productSelect.stock == 0
|
||
)
|
||
return that.$util.Tips({
|
||
title: "产品库存不足，请选择其它"
|
||
});
|
||
let q = {
|
||
product_id: that.id,
|
||
cart_num: Number(that.attr.productSelect.cart_num),
|
||
is_new: 1,
|
||
product_attr_unique: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : ""
|
||
};
|
||
postCartAdd(q)
|
||
.then(function(res) {
|
||
that.attr.cartAttr = false;
|
||
uni.navigateTo({
|
||
url: '/pages/users/order_confirm/index?cartId=' + res.data.cart_id
|
||
});
|
||
})
|
||
.catch(res => {
|
||
return that.$util.Tips({
|
||
title: res
|
||
});
|
||
});
|
||
},
|
||
|
||
// 去商品详情
|
||
godDetail(item) {
|
||
goShopDetail(item).then(res => {
|
||
uni.navigateTo({
|
||
url: `/pages/goods_details/index?id=${item.product_id}`
|
||
})
|
||
})
|
||
},
|
||
// 分销
|
||
productBag: function() {
|
||
let that = this;
|
||
if (that.loadend) return;
|
||
if (that.loading) return;
|
||
that.loading = true;
|
||
that.loadTitle = '';
|
||
productBag(that.where).then(res => {
|
||
let list = res.data.list;
|
||
let productList = that.$util.SplitArray(list, that.distribution);
|
||
let loadend = list.length < that.where.limit;
|
||
that.loadend = loadend;
|
||
that.loading = false;
|
||
that.loadTitle = loadend ? '已全部加载' : '加载更多';
|
||
that.$set(that, 'distribution', productList);
|
||
that.$set(that.where, 'page', that.where.page + 1);
|
||
}).catch(err => {
|
||
that.loading = false;
|
||
that.loadTitle = '加载更多';
|
||
});
|
||
},
|
||
// 推荐
|
||
bagRecommend: function() {
|
||
let that = this;
|
||
bagRecommend().then(res => {
|
||
this.fastList = res.data.list
|
||
})
|
||
},
|
||
/**
|
||
* 获取个人用户信息
|
||
*/
|
||
getUserInfo: function() {
|
||
let that = this;
|
||
getUserInfo().then(res => {
|
||
that.userInfo = res.data
|
||
});
|
||
},
|
||
// 说明以及导航
|
||
bagExplain: function() {
|
||
let that = this;
|
||
bagExplain().then(res => {
|
||
let data = res.data;
|
||
this.menus = data.data;
|
||
this.explainTxt = data.explain;
|
||
this.openActivity = true
|
||
}).catch(res => {
|
||
this.openActivity = false
|
||
return that.$util.Tips({
|
||
title: res
|
||
});
|
||
});
|
||
},
|
||
|
||
explain() {
|
||
this.explainShow = true;
|
||
},
|
||
close() {
|
||
this.explainShow = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
.area-row {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: block;
|
||
width: 80%;
|
||
text-align: center;
|
||
}
|
||
.b-color {
|
||
border: 1rpx solid var(--view-theme);
|
||
background-color: var(--view-theme);
|
||
}
|
||
.vip-money {
|
||
color: #282828;
|
||
font-size: 22rpx;
|
||
margin-left: 6rpx;
|
||
font-weight: bold;
|
||
}
|
||
.vipImg {
|
||
width: 65rpx;
|
||
height: 28rpx;
|
||
margin: 4rpx 0 0 4rpx;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
}
|
||
.distributor {
|
||
.headerBg {
|
||
width: 100%;
|
||
height: 371rpx;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
.explain {
|
||
position: absolute;
|
||
top: 30rpx;
|
||
right: 0;
|
||
width: 134rpx;
|
||
height: 40rpx;
|
||
background: linear-gradient(-90deg, rgba(239, 215, 168, 1) 0%, rgba(248, 230, 193, 1) 100%);
|
||
border-radius: 20px 0px 0px 20px;
|
||
color: var(--view-theme);
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
}
|
||
.picTxt {
|
||
position: absolute;
|
||
left: 60rpx;
|
||
bottom: 38rpx;
|
||
.pictrue {
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
border-radius: 50%;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.text {
|
||
font-size: 34rpx;
|
||
color: #814C07;
|
||
margin-left: 19rpx;
|
||
width: 500rpx;
|
||
|
||
}
|
||
.info {
|
||
font-size: 28rpx;
|
||
color: #BB8D59;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.nav {
|
||
padding: 0 0rpx 30rpx;
|
||
flex-wrap: wrap;
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 25%;
|
||
margin-top: 30rpx;
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
top: 20rpx;
|
||
}
|
||
.picture{
|
||
border: 40rpx solid #FFF8EC;
|
||
}
|
||
.menu-txt {
|
||
color: #B99450;
|
||
font-size: 32rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.public_title {
|
||
margin-top: 20rpx;
|
||
image {
|
||
width: 119rpx;
|
||
height: 15rpx;
|
||
&.right {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
.name {
|
||
font-size: 34rpx;
|
||
color: var(--view-theme);
|
||
margin: 0 19rpx;
|
||
}
|
||
}
|
||
.recommend {
|
||
.scroll-product {
|
||
white-space: nowrap;
|
||
margin-top: 45rpx;
|
||
padding-left: 30rpx;
|
||
height: 200rpx;
|
||
.scroll-view_x {
|
||
height: 100%;
|
||
}
|
||
.itemCon {
|
||
display: inline-block;
|
||
.item {
|
||
width: 430rpx;
|
||
height: 156rpx;
|
||
margin-right: 30rpx;
|
||
border-radius: 8rpx;
|
||
position: relative;
|
||
box-shadow: 0 10rpx 20rpx -5rpx #eee;
|
||
.circular {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
margin-top: -10rpx;
|
||
right: 40rpx;
|
||
background: var(--view-theme);
|
||
}
|
||
.open {
|
||
width: 60rpx;
|
||
writing-mode: vertical-lr;
|
||
writing-mode: tb-lr;
|
||
color: #fff;
|
||
height: 100%;
|
||
text-align: center;
|
||
line-height: 70rpx;
|
||
border-radius: 0 8rpx 8rpx 0;
|
||
border: none;
|
||
}
|
||
.picTxt {
|
||
width: 382rpx;
|
||
height: 100%;
|
||
border-radius: 0 8rpx 8rpx 0;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: #fff;
|
||
.pictrue {
|
||
width: 156rpx;
|
||
height: 100%;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 8rpx 0 0 8rpx;
|
||
}
|
||
}
|
||
.text {
|
||
width: 210rpx;
|
||
padding-right: 10rpx;
|
||
box-sizing: border-box;
|
||
.name {
|
||
width: 210rpx;
|
||
font-size: 26rpx;
|
||
color: #282828;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.price_count{
|
||
height: 76rpx;
|
||
}
|
||
.money {
|
||
font-size: 28rpx;
|
||
color: var(--view-priceColor);
|
||
font-weight: bold;
|
||
.num {
|
||
font-size: 32rpx;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pin {
|
||
.list {
|
||
padding-left: 30rpx;
|
||
margin-top: 50rpx;
|
||
.item {
|
||
position: relative;
|
||
.pictrue {
|
||
width: 210rpx;
|
||
height: 210rpx;
|
||
border-radius: 16px;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
&~.item {
|
||
margin-top: 60rpx;
|
||
.text {
|
||
&::after {
|
||
width: 100%;
|
||
height: 1px;
|
||
position: absolute;
|
||
content: '';
|
||
top: -30rpx;
|
||
background-color: #F0F0F0;
|
||
}
|
||
}
|
||
}
|
||
.text {
|
||
position: relative;
|
||
width: 460rpx;
|
||
font-size: 30rpx;
|
||
color: #282828;
|
||
padding: 10rpx 30rpx 24rpx 0;
|
||
.name{
|
||
height: 70rpx;
|
||
}
|
||
.money {
|
||
font-size: 28rpx;
|
||
color: var(--view-priceColor);
|
||
font-weight: bold;
|
||
.num {
|
||
font-size: 36rpx;
|
||
|
||
}
|
||
}
|
||
.open {
|
||
width: 144rpx;
|
||
height: 48rpx;
|
||
border-radius: 24rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 48rpx;
|
||
font-size: 24rpx;
|
||
right: 30rpx;
|
||
border: none;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.explainTxt {
|
||
position: fixed;
|
||
top: 20%;
|
||
left: 50%;
|
||
width: 600rpx;
|
||
background-color: #fff;
|
||
margin-left: -300rpx;
|
||
border-radius: 8rpx;
|
||
z-index: 32;
|
||
padding: 33rpx;
|
||
transition: all 0.3s ease-in-out 0s;
|
||
opacity: 0;
|
||
transform: scale(0);
|
||
&.on {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
.name {
|
||
font-size: 38rpx;
|
||
position: relative;
|
||
text-align: center;
|
||
color: var(--view-theme);
|
||
.iconfont {
|
||
position: absolute;
|
||
color: #999999;
|
||
font-size: 37rpx;
|
||
top: -10rpx;
|
||
right: 0rpx;
|
||
}
|
||
}
|
||
.conter {
|
||
margin-top: 30rpx;
|
||
font-size: 26rpx;
|
||
color: #282828;
|
||
line-height: 1.6;
|
||
max-height: 600rpx;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
}
|
||
</style>
|