141 lines
5.2 KiB
Vue
141 lines
5.2 KiB
Vue
<template>
|
||
|
||
<div class="gouwuchelist">
|
||
|
||
<div class="row1">
|
||
<el-checkbox :label="checkeddianpu" @click="childClick"></el-checkbox>
|
||
<svg t="1616141748140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2334" width="16" height="16"><path d="M761.9 927.6H264.1c-70.5 0-125.7-42.6-125.7-97V550.9c0-24.3 19.7-44 44-44s44 19.7 44 44v277.2c3.5 3.7 16.4 11.5 37.7 11.5H762c21.3 0 34.2-7.7 37.7-11.5V550.9c0-24.3 19.7-44 44-44s44 19.7 44 44v279.7c-0.1 54.4-55.3 97-125.8 97z" fill="#e2231a" p-id="2335"></path><path d="M513.7 633.7c-11.1 0-22.1-1.5-32.9-4.6l-181.2-52.2c-2.6-0.8-5.3-1.1-7.9-0.9l-129.3 8.2c-24.6 1.6-48.7-8.7-65.7-28.2C77 533.6 68.9 501.7 75 470.9l52.2-261.6c13-65 63-110.4 121.6-110.4h528.4c58.6 0 108.6 45.4 121.6 110.4L951 470.9c6.1 30.8-2 62.6-21.7 85.2-17 19.5-41.1 29.8-65.7 28.2l-129.4-8.2c-2.7-0.2-5.3 0.1-7.9 0.9l-179.4 52c-10.9 3.1-22.1 4.7-33.2 4.7zM293.2 488c10.4 0 20.7 1.5 30.7 4.4l181.2 52.1c5.7 1.6 11.5 1.6 17.2 0l179.4-52c12.4-3.6 25.2-5 38-4.2l124.5 7.9c0.7-1.8 1.2-4.5 0.5-8l-52.2-261.6c-4.6-23-19.4-39.7-35.3-39.7H248.8c-15.9 0-30.7 16.7-35.3 39.7l-52.2 261.6c-0.7 3.5-0.1 6.2 0.5 8l124.3-7.9c2.4-0.2 4.7-0.3 7.1-0.3z m576 8.5h0.2-0.2z" fill="#e2231a" p-id="2336"></path><path d="M513.7 447.6c-24.3 0-44-19.7-44-44V293.5c0-24.3 19.7-44 44-44s44 19.7 44 44v110.2c0 24.2-19.7 43.9-44 43.9zM702.9 422.7c-20.9 0-39.5-15-43.3-36.3l-15.2-85.2c-4.3-23.9 11.7-46.8 35.6-51 24.1-4.3 46.8 11.7 51 35.6l15.2 85.2c4.3 23.9-11.7 46.8-35.6 51-2.6 0.4-5.2 0.7-7.7 0.7zM319.8 422.7c-2.5 0-5.1-0.2-7.6-0.7-24-4.2-39.9-27-35.8-50.9l14.9-85.2c4.2-23.9 27-39.9 50.9-35.8 24 4.2 39.9 27 35.8 50.9l-14.9 85.2c-3.7 21.4-22.3 36.5-43.3 36.5z" fill="#e2231a" p-id="2337"></path></svg>
|
||
<span>店铺：</span>
|
||
<a href="">{{shangpin.dianpuname}}</a>
|
||
</div>
|
||
<div class="gwc-content">
|
||
<div class="tuhejieshao">
|
||
<el-checkbox :label="checkeddingdan" ></el-checkbox>
|
||
<img src="..\assets\static\img\clothes.jpg" alt="">
|
||
<p>{{shangpin.shangpinname}}</p>
|
||
</div>
|
||
<div class="canshu">
|
||
<p v-for="(casnhu,index) in shangpin.canshulist" :key="index">{{casnhu.canshuname}}：{{casnhu.canshuvalue}}</p>
|
||
<svg style="display:none" t="1616146720956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3457" width="16" height="16"><path d="M369.269 883.675l-321.935 91.337 91.335-321.938z" p-id="3458" fill="#9c9c9c"></path><path d="M1000.772 252.109l-77.526 77.526-230.598-230.598 77.522-77.524c0 0 36.951-36.895 74.509 0.663 37.562 37.563 110.575 110.574 151.709 151.71 41.138 41.134 4.385 78.223 4.385 78.223z" p-id="3459" fill="#9c9c9c"></path><path d="M900.035 352.787l-507.821 507.821-230.54-230.54 507.821-507.821 230.54 230.54z" p-id="3460" fill="#9c9c9c"></path></svg>
|
||
</div>
|
||
<div class="danjia">
|
||
<p>￥{{(shangpin.yuanjia).toFixed(2)}}</p>
|
||
<p>￥{{(shangpin.xianjia).toFixed(2)}}</p>
|
||
</div>
|
||
<div class="shuliang">
|
||
<el-input-number size="mini" v-model="shangpin.num4" :min="1" @change="handleChange"></el-input-number>
|
||
</div>
|
||
<div class="jine">
|
||
<!-- <span>￥{{(shangpin.xianjia*shangpin.num4).toFixed(2)}}</span> -->
|
||
|
||
<span>￥{{(shangpin.xianjia,shangpin.num4)}}</span>
|
||
</div>
|
||
<div class="caozuo">
|
||
<a href="">移入收藏夹</a>
|
||
<a href="">删除</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name:'gouwuchelist',
|
||
props:{
|
||
shangpin:Object
|
||
},
|
||
data(){
|
||
return{
|
||
|
||
|
||
|
||
|
||
}
|
||
},
|
||
methods:{
|
||
handleChange(value) {
|
||
console.log(value);
|
||
},
|
||
childClick(e){
|
||
console.log(e)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
*{
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.gouwuchelist .row1{
|
||
padding: 10px 30px;
|
||
|
||
}
|
||
.gouwuchelist .row1 svg{
|
||
margin: 0px 5px 0 15px;
|
||
width: 20px;
|
||
height: 20px;
|
||
position: relative;
|
||
top: 4px;
|
||
}
|
||
.gouwuchelist .row1 span,a{
|
||
font-size: 13px;
|
||
text-decoration: none;
|
||
}
|
||
.gwc-content {
|
||
padding:20px 0 20px 0;
|
||
width: 98%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: #fcfcfc;
|
||
border:1px solid #e7e7e7; ;
|
||
}
|
||
.gwc-content .tuhejieshao p{
|
||
width: 160px;
|
||
overflow: hidden;
|
||
height: 31px;
|
||
font-size: 12.5px;
|
||
display: inline-block;
|
||
margin-left: 20px;
|
||
}
|
||
.gwc-content .tuhejieshao img{
|
||
margin-left: 20px;
|
||
}
|
||
.gwc-content .tuhejieshao{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
.gwc-content .canshu{
|
||
font-size: 13px;
|
||
margin-left: -20px;
|
||
}
|
||
.gwc-content .danjia p:first-child{
|
||
font-size: 12px;
|
||
text-decoration: line-through;
|
||
color: darkgray;
|
||
}
|
||
.gwc-content .danjia p:last-child{
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
}
|
||
.gwc-content .caozuo a{
|
||
display: block;
|
||
/* text-decoration: none; */
|
||
color: black;
|
||
}
|
||
.gwc-content .caozuo a:hover{
|
||
text-decoration: #e2231a;
|
||
color: #e2231a;
|
||
}
|
||
.gwc-content .jine{
|
||
color: #e2231a;
|
||
font-weight:bold;
|
||
margin-left: -20px;
|
||
}
|
||
.gwc-content .shuliang{
|
||
margin-left: -20px;
|
||
}
|
||
</style> |