今天写这个吧 不偷懒了 我们慢慢写
那个优惠卷那个三角形笑死我不会写啊哈哈哈哈我试着写写看
懂了我先整出一个三角形。
<template>
<div class="back">
<div class="out outs" @click="onSubmit"></div>
<div class="title">优惠卷</div>
</div>
<div class="contant">
<div class="coupon">
<div class="dash">
<div class="name">优惠卷</div>
<div class="money"><span>¥</span><span class="moneyspan">100</span></div>
</div>
<div class="timeout">
<div class="month">五月消费券</div>
<div class="reason">6周年VIP回馈礼B</div>
<div class="term">有效期至:2022.10.20</div>
</div>
<div class="nouse">已使用</div>
<!-- <div class="use">未使用</div> -->
</div>
<div class="coupon">
<div class="dash">
<div class="name">优惠卷</div>
<div class="money"><span>¥</span><span class="moneyspan">100</span></div>
</div>
<div class="timeout">
<div class="month">五月消费券</div>
<div class="reason">6周年VIP回馈礼B</div>
<div class="term">有效期至:2022.10.20</div>
</div>
<div class="nouse">已使用</div>
<!-- <div class="use">未使用</div> -->
</div>
<div class="coupon">
<div class="dash">
<div class="name">优惠卷</div>
<div class="money"><span>¥</span><span class="moneyspan">100</span></div>
</div>
<div class="timeout">
<div class="month">五月消费券</div>
<div class="reason">6周年VIP回馈礼B</div>
<div class="term">有效期至:2022.10.20</div>
</div>
<div class="nouse">已使用</div>
<!-- <div class="use">未使用</div> -->
</div>
<div class="coupon">
<div class="dash">
<div class="name">优惠卷</div>
<div class="money"><span>¥</span><span class="moneyspan">200</span></div>
</div>
<div class="timeout">
<div class="month">五月消费券</div>
<div class="reason">6周年VIP回馈礼B</div>
<div class="term">有效期至:2022.10.20</div>
</div>
<div class="nouse">已使用</div>
<!-- <div class="use">未使用</div> -->
</div>
<div class="coupon">
<div class="dash">
<div class="name">优惠卷</div>
<div class="money"><span>¥</span><span class="moneyspan">300</span></div>
</div>
<div class="timeout">
<div class="month">五月消费券</div>
<div class="reason">6周年VIP回馈礼B</div>
<div class="term">有效期至:2022.10.20</div>
</div>
<div class="nouse">已使用</div>
<!-- <div class="use">未使用</div> -->
</div>
<div class="coupon">
<div class="dash">
<div class="name">优惠卷</div>
<div class="money"><span>¥</span><span class="moneyspan">400</span></div>
</div>
<div class="timeout">
<div class="month">五月消费券</div>
<div class="reason">6周年VIP回馈礼B</div>
<div class="term">有效期至:2022.10.20</div>
</div>
<div class="nouse">已使用</div>
<!-- <div class="use">未使用</div> -->
</div>
</div>
<!-- 弹窗组件 -->
</template>
.nouse {
border-radius: 0.3vw;
border: 0.104vw solid @text-color-6;
text-align: center;
width: 3.6vw;
height: 1.5vw;
color: @text-color-6;
font-family: @font-family-3;
font-size: 1vw;
font-weight: @font-weight-1;
margin-top: 2.8vw;
background-color: rgba(153, 153, 153, 0.1);
}
.use {
border-radius: 0.3vw;
border: 0.104vw solid rgba(158, 111, 66, 0.5);
text-align: center;
width: 3.6vw;
height: 1.5vw;
color: @text-color-9;
font-family: @font-family-3;
font-size: 1vw;
font-weight: @font-weight-1;
margin-top: 3vw;
background-color: rgba(153, 153, 153, 0.1);
}
.term {
color: @text-color-3;
font-family: @font-family-3;
font-size: 1vw;
font-weight: @font-weight-1;
margin-top: 1vw;
}
.reason {
color: @text-color-9;
font-family: @font-family-3;
font-size: 1vw;
font-weight: @font-weight-1;
margin-top: 0.5vw;
}
.month {
color: @text-color-7;
font-family: @font-family-2;
font-size: 1.4vw;
font-weight: @font-weight-1;
}
.timeout {
margin-left: 2vw;
}
.dash {
border-right: 0.15vw dashed rgba(158, 111, 66, 0.5);
width: 9vw;
}
.money {
text-align: center;
color: @text-color-9;
font-family: @font-family-4;
font-size: 1.5vw;
font-weight: 400;
padding-top: 10%;
}
.moneyspan {
font-size: 2.7vw;
}
.name {
width: 6vw;
height: 36px;
background: @text-color-9;
background-blend-mode: normal;
border-radius: 0.5vw;
margin-left: 2vw;
color: #ffffff;
font-family: 'PingFangSC-Regular';
font-size: 20px;
font-weight: 400;
text-align: center;
}
.name::before {
content: '';
width: 0;
height: 0;
border: 0.4vw solid;
top: 0.25vw;
left: -1vw;
border-color: @text-color-9 transparent transparent;
position: relative;
}
.name::after {
content: '';
width: 0;
height: 0;
border: 0.4vw solid;
top: 0.25vw;
right: -1vw;
border-color: @text-color-9 transparent transparent;
position: relative;
}
.coupon {
width: 26vw;
height: 8vw;
background-color: rgba(243, 232, 206, 0.2);
margin-right: 2.5vw;
margin-top: 1vw;
display: flex;
box-sizing: border-box;
}
.back {
display: flex;
}
.contant {
width: 88%;
// height: 100%;
margin-bottom: 10%;
margin-top: 6vw;
margin-left: 6vw;
display: flex;
flex-wrap: wrap;
}
.outs {
z-index: 999 !important;
border-radius: 50%;
position: absolute;
left: 6vw;
top: 1vw;
width: 2.08441vw;
height: 2.08441vw;
background: @background-1;
background-blend-mode: normal;
box-shadow: 0vw 0vw 0.20844vw rgba(0, 0, 0, 0.1);
background: url(../../assets/箭头左_arrow-left.png) no-repeat;
background-position: 50% 50%;
}
.title {
position: absolute;
left: 9vw;
top: 0.5vw;
color: @text-color;
font-family: @font-family;
font-size: 2vw;
font-weight: @font-weight-1;
}
6666写完了
但是肯定要写js
<script setup lang="ts">
import { defineComponent, reactive, getCurrentInstance, provide, ref } from 'vue';
import { backtopreviouspage } from '@/nview-ui/utils/index';
// define props & emit
// init & data
const useif = ref(true);
const nouseif = ref(false);
const onSubmit = () => {
backtopreviouspage();
};
const usecoupon = () => {
useif.value = false;
nouseif.value = true;
};
</script>
<div class="coupon">
<div class="dash">
<div class="name">优惠卷</div>
<div class="money"><span>¥</span><span class="moneyspan">100</span></div>
</div>
<div class="timeout">
<div class="month">五月消费券</div>
<div class="reason">6周年VIP回馈礼B</div>
<div class="term">有效期至:2022.10.20</div>
</div>
<div class="nouse" v-if="nouseif">已使用</div>
<div class="use" @click="usecoupon" v-if="useif">未使用</div>
</div>