align-items: center;
text-align: left;
background: rgb(214,175,209);
}
.result_content{
display: block;
margin-left: 2rem;
}
.or_amount{
text-decoration: line-through;
line-height: 2rem;
}
.equal_to{
font-size: 2rem;
color:rgb(253,234,93);
}
.now_amount span{
color:rgb(253,234,93);
}
.img01{
position: absolute;
}
.buy{
position: absolute;
right: 12px;
bottom: 10px;
font-size: 0.75rem;
}
</style>
</head>
<body>
<!-- 商品计算器 -->
<div id="app">
<div class="goods_box">
<ul>
<li class="goods" v-for="(item, index) in list" @click="choose(index)">
<img class="goods_img" v-bind:src="item.goods_img">
<div class="price">
<div class="goods_name">
{{item.name}}
</div>
<div class="now_and_or">
<div class="now">现价：<span class="now_price">{{item.hide_price}}￥</span></div>
<div class="or">原价：<span class="or_price">{{item.or_price}}￥</span></div>
</div>
</div>
</li>
</ul>
</div>
<div class="count_box">
<ul>
<li v-for="(item, index) in count_list" @click="deleteGoods(index)">
<div class="count_box_item">
<div class="img_box">
<div class="delete">×</div>
<img class="goods_img" v-bind:src="item.goods_img">
</div>
</div>
<div class="add">+</div>
</li>
<li>
<div class="result">
<div class="equal_to">=</div>
<div class="result_content">
<div class="or_amount">原价：{{or_amount}}￥</div>
<div class="now_amount">现价：<span>{{now_amount}}￥</span></div>
</div>
</div>
</li>
</ul>
<a class="buy" href="#" rel="external nofollow" >立即购买</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
var idsArray = [];
var or_priceArray = [];
var now_priceArray = [];
//数组去重
function removeDuplicatedItem(arr) {
for(var i = 0; i < arr.length-1; i++){
for(var j = i+1; j < arr.length; j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
j--;
}
}
}
return arr;
}
var app = new Vue({
el:"#app",
data:{
// 商品列表
list:[
