mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-03 02:36:39 +08:00
1203 lines
28 KiB
Vue
1203 lines
28 KiB
Vue
<template>
|
||
<div>
|
||
<div class="user" v-for="(item,index) in newlist" :key="index">
|
||
<Myheader></Myheader>
|
||
<div class="rc-usermain" >
|
||
<magnifier v-bind:parentmsg="msg" ></magnifier>
|
||
<div class="rc-header" >
|
||
<div class="rc-main" >
|
||
<div class="usermain">
|
||
<div class="rc-title">
|
||
<h2>{{ item.productName }}</h2>
|
||
</div>
|
||
|
||
<div class="productdetails">
|
||
<div class="rc-productdetail">
|
||
<i>商品价格</i>
|
||
<span>￥{{ item.rsp }}</span>
|
||
<i style="font-size:12px;color:#999999">￥{{item.ecPrice}}</i>
|
||
</div>
|
||
<div class="rc-productdetai">
|
||
<div>
|
||
<i>活动促销:</i>
|
||
<span>全场商品限时优惠</span>
|
||
</div>
|
||
<em @click="userget()">立即领取</em>
|
||
</div>
|
||
<div class="rc-button" v-if="!userbuy">
|
||
<span @click="usertanchu(item,0)">加入购物车</span>
|
||
<span @click="usertanchu(item,1)">立即购买</span>
|
||
</div>
|
||
</div>
|
||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div>
|
||
|
||
|
||
<div class="rc-productdeta" v-if="userbuy">
|
||
<div class="rc-prodtop">
|
||
<div>
|
||
<span>商品规格</span>：
|
||
</div>
|
||
<!-- <em v-for="(item, index) in stype" :key="index" @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</em> -->
|
||
|
||
<em class='active'>
|
||
{{ item.specifications }}
|
||
</em>
|
||
</div>
|
||
<div class="rc-produnnum">
|
||
<div>
|
||
<span>商品数量</span>：
|
||
</div>
|
||
<img src="../../assets/image/userjian.png" alt="" @click="sub()" />
|
||
<strong>{{sales_num}}</strong>
|
||
<img
|
||
src="../../assets/image/userjia.png" alt="" @click="plus()"
|
||
class="rc-message"
|
||
|
||
|
||
/>
|
||
</div>
|
||
|
||
<div class="certification">
|
||
<ul>
|
||
<li>
|
||
<span
|
||
>服务说明：<i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span
|
||
>
|
||
</li>
|
||
<li>
|
||
<span
|
||
>商品运费：<i>全场包邮(港澳除外)</i></span
|
||
>
|
||
</li>
|
||
|
||
<li>
|
||
<span
|
||
>商品编号：<i>{{ item.brandCode }}</i></span
|
||
>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="rc-footimage">
|
||
<img :src=item.showImgFile alt="">
|
||
|
||
</div>
|
||
<Myfooter v-on:litentop='showmesg'></Myfooter>
|
||
</div>
|
||
<el-dialog
|
||
:visible.sync="dialogInfo1"
|
||
hegight="700px"
|
||
@close='userclose'
|
||
>
|
||
<div class="rs-dis">
|
||
<div
|
||
class="rc-discount"
|
||
v-for="(item, index) in usernewlist"
|
||
:key="index"
|
||
>
|
||
<img :src="userimage" alt="" />
|
||
<div class="rc-contair">
|
||
<div class="rc-left">
|
||
<div>
|
||
<i>￥</i><span>{{ item.couponAmount }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="rc-right">
|
||
<i>
|
||
{{ item.couponDesc }}
|
||
</i>
|
||
<div class="rc-main" id="rc-main">
|
||
<span>有效期</span>
|
||
<em>{{ item.validTo }}</em>
|
||
</div>
|
||
<div class="rc-footer">
|
||
<span @click="usergetconf(item)">立即领取</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</el-dialog>
|
||
<el-dialog
|
||
:visible.sync="dialogInfo2"
|
||
@close='userclose'
|
||
>
|
||
<div class="rc-headera">
|
||
<div class="rc-title">
|
||
<img src="../../assets/error.png" alt="">
|
||
</div>
|
||
<div class="rc-logmain">
|
||
<h3>温馨提示</h3>
|
||
<span>请先点击下方进行登录/注册</span>
|
||
|
||
</div>
|
||
<nuxt-link :to="`/userlogin/login/`">
|
||
<div class="userer">
|
||
<span>立即登录</span>
|
||
|
||
</div>
|
||
</nuxt-link>
|
||
</div>
|
||
|
||
|
||
</el-dialog>
|
||
<div class="rc-button" style="width:100%">
|
||
<span @click="usertanchu(item,0)">加入购物车</span>
|
||
<span @click="usertanchu(item,1)">立即购买</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from "~/components/header.vue";
|
||
import Magnifier from "@/components/magnifier.vue";
|
||
import { mapMutations } from "vuex";
|
||
import Myfooter from "~/components/rc-footer.vue";
|
||
import { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData";
|
||
const settings = require("@/config");
|
||
export default {
|
||
data() {
|
||
return {
|
||
tableLabelTest:[],
|
||
userimage: require("../../assets/image/unused.png"),
|
||
activeIndexa:0,
|
||
dialogInfo1:false,
|
||
name: [],
|
||
userlist:[],
|
||
drawlist:[],//用户可以领取的优惠券
|
||
alldraw:[],
|
||
userlistmenu:[],
|
||
msg:['11111111'],
|
||
parent_msg:['111'],
|
||
usermessage:[],
|
||
dialogInfo2:false,
|
||
productCode:'',//商品code
|
||
productlist:[],
|
||
userbuy:true,
|
||
sales_num:1,
|
||
usernewlist: [
|
||
{
|
||
price: "30",
|
||
pricestype: "新客优惠券",
|
||
special: "全场每满299-30",
|
||
period: "有效期",
|
||
starttime: "2021.11.29-2022.01.28",
|
||
catimage: require("../../assets/image/unused.png"),
|
||
},
|
||
{
|
||
price: "30",
|
||
pricestype: "新客优惠券",
|
||
special: "全场每满299-30",
|
||
period: "有效期",
|
||
starttime: "2021.11.29-2022.01.28",
|
||
catimage: require("../../assets/image/unused.png"),
|
||
},
|
||
],
|
||
|
||
|
||
newlist: [
|
||
{
|
||
price: "167.00",
|
||
pricestype: "英国短毛猫成猫全价湿粮",
|
||
special: "限时折扣全场商品8折",
|
||
period: "今晚20:00前付款，明日12:00前发货",
|
||
starttime: "商品未满199元 快递费:9.00元",
|
||
shangbianhao: "6212263798102432",
|
||
catimage: require("../../assets/image/rc-new.png"),
|
||
},
|
||
],
|
||
stype: [
|
||
{
|
||
title: "3kg",
|
||
},
|
||
{
|
||
title: "5kg",
|
||
},
|
||
],
|
||
};
|
||
|
||
},
|
||
components: {
|
||
Myheader,
|
||
Magnifier,
|
||
Myfooter
|
||
|
||
},
|
||
mounted() {
|
||
|
||
if(this.usermessage!=='' ||this.usermessage.data!==undefined){
|
||
this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
|
||
let stype=this.$route.query.stype;
|
||
this.productCode=this.$route.query.productCode;
|
||
console.log(this.productCode)
|
||
this.userquery(this.productCode);
|
||
console.log(this.userlistmenu)
|
||
this.$nextTick(()=>{
|
||
|
||
})
|
||
if(stype==1){
|
||
this.userbuy=true;
|
||
}else if(stype==2){
|
||
console.log('这是要消失的')
|
||
this.$nextTick(() => {
|
||
this.userbuy=false;
|
||
|
||
})
|
||
|
||
|
||
}
|
||
}
|
||
|
||
|
||
},
|
||
methods: {
|
||
...mapMutations(["changemessage"]),
|
||
showmesg(){
|
||
console.log('-----');
|
||
this.toTop();
|
||
},
|
||
toTop() {
|
||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||
// 实现滚动效果
|
||
const timeTop = setInterval(() => {
|
||
document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
|
||
if (top <= 0) {
|
||
clearInterval(timeTop);
|
||
}
|
||
}, 10);
|
||
},
|
||
|
||
//领取优惠券
|
||
usergetconf(item){
|
||
console.log(item);
|
||
if(this.usermessage.data!==''||this.usermessage.data!==undefined){
|
||
this.getconf(this.usermessage.data.id,item.couponId);
|
||
}
|
||
},
|
||
|
||
//获取用户领取的优惠券
|
||
async getconf(memberId,couponId) {
|
||
let data = await getConfig(memberId,couponId);
|
||
if(data){
|
||
|
||
this.$message({
|
||
type: 'warning',
|
||
message: data.msg
|
||
});
|
||
|
||
console.log(data);
|
||
}
|
||
|
||
},
|
||
|
||
|
||
|
||
// changeName(newName){
|
||
// this.name = newName;
|
||
// },
|
||
|
||
|
||
userclose(){
|
||
console.log('这是关闭的');
|
||
this.userlist=[];
|
||
},
|
||
async userquery() {
|
||
console.log("-----");
|
||
|
||
let data = await goodsmessage(this.productCode);
|
||
if(data){
|
||
this.newlist=data.data;
|
||
|
||
}
|
||
|
||
this.userlistmenu=this.newlist[0].productAttachmentList;
|
||
let changemess=JSON.stringify(this.userlistmenu);
|
||
console.log(changemess);
|
||
this.changemessage({ data: changemess });
|
||
this.parent_msg=this.userlistmenu;
|
||
console.log( this.userlistmenu)
|
||
|
||
|
||
},
|
||
|
||
//获取用户领取的优惠券
|
||
async userdraw(mobile) {
|
||
let data = await getdraw(mobile);
|
||
if(data){
|
||
this.drawlist=data.data;
|
||
}
|
||
|
||
},
|
||
|
||
//获取所有的优惠券
|
||
async alldrawlist(memberId) {
|
||
let data = await alldiscount(memberId);
|
||
let userlist=[];
|
||
let menulsit=[];
|
||
if(data){
|
||
this.alldraw=data;
|
||
// console.log(this.alldraw.data);
|
||
let alllist=[];
|
||
this.userlist=this.alldraw.data;
|
||
this.userlist.forEach((element,index)=>{
|
||
if(typeof element.productCodes=='string'){
|
||
userlist.push(element);
|
||
// let s=element.productCodes.split(',');
|
||
// console.log(s.indexOf(this.productCode) != -1 )
|
||
// console.log('这是字符串')
|
||
|
||
}
|
||
|
||
})
|
||
let menualist=[];
|
||
userlist.filter(item=>{
|
||
console.log(item);
|
||
item.productCodes=item.productCodes.split(',')
|
||
item.productCodes.forEach(element=>{
|
||
if(element==this.productCode &&item.activityId!==10){
|
||
console.log(element)
|
||
console.log(this.productCode)
|
||
menualist.push(item);
|
||
|
||
console.log('----');
|
||
}
|
||
})
|
||
|
||
|
||
})
|
||
this.usernewlist=menualist;
|
||
console.log(this.usernewlist);
|
||
|
||
}
|
||
|
||
},
|
||
|
||
plus(num,index){
|
||
|
||
this.sales_num= parseInt(this.sales_num) + 1;
|
||
console.log( this.sales_num);
|
||
} ,
|
||
// 数量减方法
|
||
sub(num,index){
|
||
if( this.sales_num <= 1){
|
||
this.sales_num = 1;
|
||
}
|
||
else{
|
||
this.sales_num = parseInt(this.sales_num) - 1;
|
||
}
|
||
|
||
},
|
||
|
||
async courseId(item) {
|
||
console.log(item);
|
||
console.log(this.usermessage);
|
||
// let userid=JSON.parse(location.getItem('userInfo'));
|
||
// let mobile=JSON.parse(location.getItem('userInfo'));
|
||
// console.log(userid,mobile);
|
||
let data = await postCourseId( this.productCode,this.sales_num,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.productName,item.basePrice,item.specifications);
|
||
if(data){
|
||
this.productlist=data;
|
||
}
|
||
console.log(data);
|
||
},
|
||
usertanchu(item,orderm){
|
||
|
||
let user= localStorage.getItem("userInfo");
|
||
if(user==undefined||user==null||user==''){
|
||
this.dialogInfo2=true;
|
||
return
|
||
}else{
|
||
|
||
this.courseId(item);
|
||
if(orderm==0){
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '加入购物车成功'
|
||
});
|
||
}
|
||
if(orderm==1){
|
||
this.$router.push({
|
||
path: "/myorder/userrecord",
|
||
|
||
});
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
},
|
||
userget(){
|
||
this.userdraw(this.usermessage.data.mobile);
|
||
this.alldrawlist(this.usermessage.data.id);
|
||
this.dialogInfo1=true;
|
||
},
|
||
selectsearch(item, index) {
|
||
|
||
this.activeIndexa=index;
|
||
},
|
||
},
|
||
|
||
onceproduct(){
|
||
|
||
},
|
||
|
||
};
|
||
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
// 手机端
|
||
@media screen and(min-width: 320px) and(max-width:768px) {
|
||
.rc-button{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
position: fixed;
|
||
justify-content: center;
|
||
height: 60px;
|
||
bottom: 0;
|
||
background-color: white;
|
||
|
||
span{
|
||
width: 160px;
|
||
height: 48px;
|
||
background: #E2001A;
|
||
border-radius: 30px;
|
||
font-size: 16px;
|
||
color:#FFFFFF;
|
||
display: block;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
span:last-child{
|
||
margin-left: 40px;
|
||
}
|
||
}
|
||
.rc-headera{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center;
|
||
h3{
|
||
color:#333333;
|
||
font-size: 26px;
|
||
}
|
||
.rc-title{
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
|
||
}
|
||
}
|
||
.userer{
|
||
span{
|
||
width: 130px;
|
||
height: 40px;
|
||
border: 2px solid #E2001A;
|
||
border-radius: 30px;
|
||
display: block;
|
||
color: #E2001A;
|
||
line-height: 40px;
|
||
margin-top: 42px;
|
||
font-size: 14px;
|
||
}
|
||
i{
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
display: block;
|
||
margin-top: 32px;
|
||
color: #E1001A;
|
||
}
|
||
}
|
||
}
|
||
/deep/.el-dialog {
|
||
width: 80%;
|
||
position: relative;
|
||
}
|
||
.rc-discount {
|
||
position: relative;
|
||
width: 100%;
|
||
img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.rc-contair {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.rc-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #e1001a;
|
||
padding-right: 21px;
|
||
width: 30%;
|
||
float: left;
|
||
height: 100%;
|
||
i {
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
}
|
||
span {
|
||
font-size: 26px;
|
||
}
|
||
strong {
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
display: block;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
.rc-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 36px;
|
||
justify-content: center;
|
||
height: 100%;
|
||
i {
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #e1001a;
|
||
}
|
||
.rc-main {
|
||
color: #999999;
|
||
font-size: 12px;
|
||
}
|
||
span {
|
||
display: block;
|
||
margin-top: 8px;
|
||
}
|
||
em {
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.rc-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-right: 10px;
|
||
span {
|
||
width: 72px;
|
||
height: 25px;
|
||
background: #e2001a;
|
||
text-align: center;
|
||
line-height: 25px;
|
||
font-size: 12px;
|
||
color: #ffffff;
|
||
margin-bottom: 8px;
|
||
border-radius: 100px;
|
||
margin-right: 8px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.active{
|
||
border: 2px solid #E2001A;
|
||
color:#666666;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
.unactive{
|
||
border: 2px solid #808285;
|
||
color:#666666;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
.rc-footimage{
|
||
overflow: hidden;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
img{
|
||
width: 100%;
|
||
}
|
||
|
||
}
|
||
.rc-header {
|
||
width: 100%;
|
||
|
||
.rc-main {
|
||
|
||
width: 92%;
|
||
margin: 0 auto;
|
||
.rc-title {
|
||
height: 85px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #d8d8d8;
|
||
h2 {
|
||
font-size: 22px;
|
||
|
||
color: #e1001a;
|
||
}
|
||
}
|
||
.productdetails {
|
||
|
||
margin-top: 19px;
|
||
.rc-productdetail {
|
||
display: flex;
|
||
align-items: center;
|
||
i {
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
|
||
color: #333333;
|
||
}
|
||
|
||
span {
|
||
font-size: 18px;
|
||
margin-left: 8px;
|
||
color: #e1001a;
|
||
}
|
||
}
|
||
.rc-productdetai {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
i {
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
span {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
margin-left: 8px;
|
||
}
|
||
em {
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
margin-left: 68px;
|
||
color: #e2001a;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rc-productdeta {
|
||
margin-top: 20px;
|
||
.rc-prodtop {
|
||
display: flex;
|
||
align-items: center;
|
||
span {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
em {
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 59px;
|
||
font-size: 16px;
|
||
margin-left: 4px;
|
||
height: 39px;
|
||
border-radius: 3px;
|
||
}
|
||
}
|
||
}
|
||
.rc-produnnum {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 20px;
|
||
margin-top: 16px;
|
||
border-bottom: 1px solid #d7d7d7;
|
||
span {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
img {
|
||
width: 29px;
|
||
height: 29px;
|
||
display: block;
|
||
margin-left: 5px;
|
||
|
||
}
|
||
.rc-message {
|
||
width: 29px;
|
||
margin-left: 8px;
|
||
height: 29px;
|
||
display: block;
|
||
}
|
||
|
||
strong {
|
||
font-style: normal;
|
||
list-style: none;
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 1px solid #d7d7d7;
|
||
opacity: 1;
|
||
border-radius: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
margin: 0 5px 0 5px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
.certification {
|
||
.rc-button{
|
||
width: 100%;
|
||
padding-top: 33px;
|
||
display: flex;
|
||
align-items: center;
|
||
span{
|
||
width: 160px;
|
||
height: 48px;
|
||
background: #E2001A;
|
||
border-radius: 30px;
|
||
font-size: 16px;
|
||
color:#FFFFFF;
|
||
display: block;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
span:last-child{
|
||
margin-left: 40px;
|
||
}
|
||
}
|
||
margin-top: 16px;
|
||
ul {
|
||
display: flex;
|
||
flex-direction: column;
|
||
line-height: 30px;
|
||
li {
|
||
float: left;
|
||
width: 100%;
|
||
text-align: left;
|
||
span {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
i{
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// /* 最小768px最大1920 *pc端/
|
||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||
.rc-headera{
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center;
|
||
h3{
|
||
color:#333333;
|
||
font-size: 26px;
|
||
}
|
||
.rc-title{
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
|
||
}
|
||
}
|
||
.userer{
|
||
span{
|
||
width: 130px;
|
||
height: 40px;
|
||
border: 2px solid #E2001A;
|
||
border-radius: 30px;
|
||
display: block;
|
||
color: #E2001A;
|
||
line-height: 40px;
|
||
margin-top: 42px;
|
||
font-size: 14px;
|
||
}
|
||
i{
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
display: block;
|
||
margin-top: 32px;
|
||
color: #E1001A;
|
||
}
|
||
}
|
||
}
|
||
.rc-header{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
h3{
|
||
color:#333333;
|
||
font-size: 26px;
|
||
}
|
||
.rc-title{
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
|
||
}
|
||
}
|
||
.userer{
|
||
img{
|
||
width: 210px;
|
||
height: 210px;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
}
|
||
|
||
span{
|
||
font-size: 16px;
|
||
|
||
color: #333333;
|
||
}
|
||
i{
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
display: block;
|
||
margin-top: 32px;
|
||
color: #E1001A;
|
||
}
|
||
}
|
||
}
|
||
/deep/.el-dialog {
|
||
width: 440px;
|
||
height: 432px;
|
||
position: relative;
|
||
}
|
||
|
||
.rc-discount {
|
||
position: relative;
|
||
img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.rc-contair {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.rc-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #e1001a;
|
||
padding-right: 21px;
|
||
width: 30%;
|
||
float: left;
|
||
height: 100%;
|
||
i {
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
}
|
||
span {
|
||
font-size: 26px;
|
||
}
|
||
strong {
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
display: block;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
.rc-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 36px;
|
||
justify-content: center;
|
||
height: 100%;
|
||
i {
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #e1001a;
|
||
}
|
||
.rc-main {
|
||
color: #999999;
|
||
font-size: 12px;
|
||
}
|
||
span {
|
||
display: block;
|
||
margin-top: 8px;
|
||
}
|
||
em {
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.rc-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-right: 10px;
|
||
span {
|
||
width: 72px;
|
||
height: 25px;
|
||
background: #e2001a;
|
||
text-align: center;
|
||
line-height: 25px;
|
||
font-size: 12px;
|
||
color: #ffffff;
|
||
margin-bottom: 8px;
|
||
border-radius: 100px;
|
||
margin-right: 8px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.rc-usermain{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.active{
|
||
border: 2px solid #E2001A;
|
||
color:#666666;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
.unactive{
|
||
border: 2px solid #808285;
|
||
color:#666666;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
.rc-header {
|
||
width: 100%;
|
||
margin-left: 80px;
|
||
.rc-footimage{
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
.rc-main {
|
||
|
||
width: 92%;
|
||
margin: 0 auto;
|
||
.rc-title {
|
||
height: 85px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #d8d8d8;
|
||
h2 {
|
||
|
||
font-size: 30px;
|
||
color: #e1001a;
|
||
}
|
||
}
|
||
.productdetails {
|
||
.rc-button{
|
||
width: 100%;
|
||
padding-top: 33px;
|
||
display: flex;
|
||
align-items: center;
|
||
span{
|
||
width: 160px;
|
||
height: 48px;
|
||
background: #E2001A;
|
||
border-radius: 30px;
|
||
font-size: 16px;
|
||
color:#FFFFFF;
|
||
display: block;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
span:last-child{
|
||
margin-left: 40px;
|
||
}
|
||
}
|
||
margin-top: 19px;
|
||
.rc-productdetail {
|
||
display: flex;
|
||
align-items: center;
|
||
i {
|
||
font-style: normal;
|
||
font-size: 18px;
|
||
|
||
color: #333333;
|
||
}
|
||
|
||
span {
|
||
font-size: 18px;
|
||
margin-left: 8px;
|
||
color: #e1001a;
|
||
}
|
||
}
|
||
.rc-productdetai {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
border-bottom: 1px solid #d7d7d7;
|
||
padding-bottom: 17px;
|
||
i {
|
||
font-style: normal;
|
||
|
||
|
||
font-size: 18px;
|
||
color: #333333;
|
||
}
|
||
span {
|
||
|
||
font-size: 20px;
|
||
color: #666666;
|
||
margin-left: 8px;
|
||
}
|
||
em {
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
width: 40%;
|
||
text-align: right;
|
||
display: block;
|
||
color: #E2001A;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rc-productdeta {
|
||
margin-top: 16px;
|
||
.rc-prodtop {
|
||
display: flex;
|
||
align-items: center;
|
||
span {
|
||
|
||
font-size: 18px;
|
||
color: #333333;
|
||
}
|
||
em {
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 59px;
|
||
font-size: 16px;
|
||
margin-left: 10px;
|
||
height: 39px;
|
||
border-radius: 3px;
|
||
color:#666666;
|
||
}
|
||
}
|
||
}
|
||
.rc-produnnum {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 20px;
|
||
margin-top: 16px;
|
||
border-bottom: 1px solid #d7d7d7;
|
||
span {
|
||
font-size: 18px;
|
||
color: #333333;
|
||
}
|
||
img {
|
||
width: 29px;
|
||
height: 29px;
|
||
display: block;
|
||
}
|
||
.rc-message {
|
||
width: 29px;
|
||
margin-left: 8px;
|
||
height: 29px;
|
||
display: block;
|
||
}
|
||
|
||
strong {
|
||
font-style: normal;
|
||
list-style: none;
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 1px solid #d7d7d7;
|
||
opacity: 1;
|
||
border-radius: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
margin: 0 5px 0 5px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
.certification {
|
||
.rc-button{
|
||
width: 100%;
|
||
padding-top: 33px;
|
||
display: flex;
|
||
align-items: center;
|
||
span{
|
||
width: 160px;
|
||
height: 48px;
|
||
background: #E2001A;
|
||
border-radius: 30px;
|
||
font-size: 16px;
|
||
color:#FFFFFF;
|
||
display: block;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
span:last-child{
|
||
margin-left: 40px;
|
||
}
|
||
}
|
||
margin-top: 16px;
|
||
ul {
|
||
display: flex;
|
||
flex-direction: column;
|
||
line-height:40px;
|
||
text-align: left;
|
||
li {
|
||
width: 100%;
|
||
float: left;
|
||
span {
|
||
font-size: 18px;
|
||
color: #333333;
|
||
}
|
||
i{
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #666666;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |