优惠卷页面ui

20岁，已秃

已于 2022-10-20 17:08:13 修改

阅读量453

点赞数

文章标签： javascript 前端 html

于 2022-10-20 16:51:14 首次发布

本文链接：https://blog.csdn.net/ccyynmb/article/details/127428242

版权

今天写这个吧不偷懒了我们慢慢写

那个优惠卷那个三角形笑死我不会写啊哈哈哈哈我试着写写看

懂了我先整出一个三角形。

<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>