优惠的信息显示和门票的类似,因为它们都没有图片,所以看起来单调了不少,但我也没想到什么更好的设计,就这样展示吧,应该也看得过去。
优惠的价格中有一个原价和一个现价,我想对原价添加一道划线,可以直接添加css样式text-decoration: line-through;
。
HTML:
<template>
<div class="fooddiscount">
<div class="item_content" @click="jump">
<el-row>
<el-col :offset="1">
<div class="name">{{ name }}</div>
</el-col>
</el-row>
<el-row>
<el-col :offset="2" :span="20">
<div class="address">
{{description}}
</div>
</el-col>
</el-row>
<el-row>
<el-col :offset="2">
<div class="count">{{count}}</div>
</el-col>
</el-row>
<el-row>
<el-col :offset="2">
<div class="price"><font class="price">{{"¥"+nowprice}}</font><font class="pastprice">{{"¥"+pastprice}}</font>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
js:
<script>
export default {
props: {
name: {
default: "加载中……",
},
description: {
default: "暂无描述",
},
link:{
default:"",
},
nowprice:{
default:"0"
},
pastprice:{
default:"0"
},
count:{
default:"已售0"
}
},
methods: {
jump(){
window.open(this.link);
}
},
mounted() {
this.loading=true;
},
};
</script>