265 lines
5.9 KiB
Vue
265 lines
5.9 KiB
Vue
<template>
|
|
<view class="flex-col page">
|
|
<view class="flex-col">
|
|
<view class="flex-col section">
|
|
<view class="flex-row justify-center items-center relative group">
|
|
<text class="text">请选择优惠券</text>
|
|
<image
|
|
class="image pos"
|
|
src="https://ide.code.fun/api/image?token=67bbe3944ae84d00122703c2&name=2bf89872f72e1782d4d3c087ad6881c0.png"
|
|
/>
|
|
</view>
|
|
<view class="flex-col mt-33">
|
|
<view class="flex-row justify-between group_2">
|
|
<text class="font">可用</text>
|
|
<text class="font">不可用</text>
|
|
</view>
|
|
<view class="relative divider">
|
|
<view class="section_2 pos_2"></view>
|
|
<view class="section_2 pos_3"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row justify-between section_3">
|
|
<text class="font_2 text_2">优惠券商城</text>
|
|
<image
|
|
class="image_2"
|
|
src="https://ide.code.fun/api/image?token=67bbe3944ae84d00122703c2&name=2829399146af5054fd6e58109f33ddb9.png"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col list">
|
|
|
|
<radio-group @change="selectedHandler">
|
|
<view class="flex-col list-item mt-17" v-for="(item, index) in items" :key="index">
|
|
<view class="flex-row justify-between self-stretch group_3">
|
|
<view class="flex-row items-baseline self-start group_6">
|
|
<text class="font_3 text_4">50</text>
|
|
<text class="font_4 text_5">￥</text>
|
|
</view>
|
|
<view class="flex-row items-center self-center group_4">
|
|
<view class="flex-col shrink-0 group_5">
|
|
<text class="self-start font text_3">满200元减50</text>
|
|
<text class="self-stretch font_5 text_6 mt-11">2025.01.08 00:00至2025.04.07 23:59</text>
|
|
</view>
|
|
<!-- <view class="ml-22 shrink-0 section_4"></view> -->
|
|
<radio class="ml-22 shrink-0 section_4" :value="index"
|
|
color="#FFB5B8"></radio>
|
|
</view>
|
|
</view>
|
|
<text class="mt-14 self-start font_2 text_7">未满足使用门槛</text>
|
|
</view>
|
|
</radio-group>
|
|
|
|
|
|
</view>
|
|
<view class="flex-row section_5">
|
|
<view class="flex-col justify-start items-center text-wrapper">
|
|
<text class="font_6 text_8">不使用优惠券</text>
|
|
</view>
|
|
<view class="flex-col justify-start items-center text-wrapper_2"><text class="font_6 text_9">确定</text></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
const items = ref([null, null])
|
|
const idx = ref(0)
|
|
const selectedHandler = (e:any) => {
|
|
idx.value = e.detail.value
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.mt-33 {
|
|
margin-top: 61.88rpx;
|
|
}
|
|
.mt-17 {
|
|
margin-top: 31.88rpx;
|
|
}
|
|
.mt-11 {
|
|
margin-top: 20.63rpx;
|
|
}
|
|
.page {
|
|
background-color: #f4f3f3;
|
|
border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
border: 3rpx solid red;
|
|
}
|
|
.section {
|
|
padding-top: 41.25rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
|
|
border-bottom: solid 1.88rpx #d9d9d9;
|
|
}
|
|
.group {
|
|
padding: 0 35.63rpx;
|
|
}
|
|
.text {
|
|
color: #323232;
|
|
font-size: 33.75rpx;
|
|
font-family: Inter;
|
|
line-height: 31.18rpx;
|
|
}
|
|
.image {
|
|
width: 37.5rpx;
|
|
height: 37.5rpx;
|
|
}
|
|
.pos {
|
|
position: absolute;
|
|
right: 35.63rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.group_2 {
|
|
padding: 0 138.75rpx 22.5rpx 157.5rpx;
|
|
}
|
|
.font {
|
|
font-size: 30rpx;
|
|
font-family: Inter;
|
|
line-height: 25.65rpx;
|
|
color: #323232;
|
|
}
|
|
.divider {
|
|
height: 5.63rpx;
|
|
}
|
|
.section_2 {
|
|
background-color: #ff3c3c;
|
|
width: 80.63rpx;
|
|
height: 5.63rpx;
|
|
}
|
|
.pos_2 {
|
|
position: absolute;
|
|
left: 144.38rpx;
|
|
top: 0;
|
|
}
|
|
.pos_3 {
|
|
position: absolute;
|
|
right: 144.38rpx;
|
|
top: 0;
|
|
}
|
|
.section_3 {
|
|
padding: 22.5rpx 33.75rpx 22.5rpx 41.25rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
.image_2 {
|
|
width: 26.25rpx;
|
|
height: 22.5rpx;
|
|
}
|
|
.list {
|
|
margin-top: 31.88rpx;
|
|
padding: 0 22.5rpx;
|
|
}
|
|
.list-item {
|
|
padding-bottom: 18.75rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 18.75rpx;
|
|
}
|
|
.list-item:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.group_3 {
|
|
padding: 33.75rpx 37.5rpx 18.75rpx;
|
|
border-bottom: solid 1.88rpx #d9d9d9;
|
|
}
|
|
.group_6 {
|
|
margin-top: 26.25rpx;
|
|
width: 81.6rpx;
|
|
}
|
|
.font_3 {
|
|
font-size: 45rpx;
|
|
font-family: Inter;
|
|
line-height: 33.81rpx;
|
|
font-weight: 600;
|
|
color: #c35c5d;
|
|
}
|
|
.text_4 {
|
|
margin-left: 26.25rpx;
|
|
}
|
|
.font_4 {
|
|
font-size: 30rpx;
|
|
font-family: Inter;
|
|
line-height: 21.64rpx;
|
|
color: #c35c5d;
|
|
}
|
|
.text_5 {
|
|
margin-left: -82.5rpx;
|
|
}
|
|
.group_4 {
|
|
margin-right: 7.5rpx;
|
|
}
|
|
.group_5 {
|
|
width: 365.66rpx;
|
|
}
|
|
.text_3 {
|
|
font-size: 28.13rpx;
|
|
line-height: 25.91rpx;
|
|
}
|
|
.font_5 {
|
|
font-size: 26.25rpx;
|
|
font-family: Inter;
|
|
line-height: 30rpx;
|
|
color: #000000;
|
|
}
|
|
.text_6 {
|
|
font-size: 24.38rpx;
|
|
}
|
|
.section_4 {
|
|
background-color: #ffffff;
|
|
border-radius: 75rpx;
|
|
width: 33.75rpx;
|
|
height: 33.75rpx;
|
|
// border-left: solid 1.88rpx #ff3c3cad;
|
|
// border-right: solid 1.88rpx #ff3c3cad;
|
|
// border-top: solid 1.88rpx #ff3c3cad;
|
|
// border-bottom: solid 1.88rpx #ff3c3cad;
|
|
}
|
|
.font_2 {
|
|
font-size: 26.25rpx;
|
|
font-family: Inter;
|
|
line-height: 25.65rpx;
|
|
color: #323232;
|
|
}
|
|
.text_2 {
|
|
line-height: 24.28rpx;
|
|
}
|
|
.text_7 {
|
|
margin-left: 30rpx;
|
|
line-height: 24.34rpx;
|
|
}
|
|
.section_5 {
|
|
margin-top: 138.75rpx;
|
|
padding: 15rpx 46.88rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
.text-wrapper {
|
|
padding: 26.25rpx 0;
|
|
flex: 1 1 328.13rpx;
|
|
background-color: #ff3c3cad;
|
|
border-radius: 93.75rpx 0rpx 0rpx 93.75rpx;
|
|
height: 82.5rpx;
|
|
}
|
|
.font_6 {
|
|
font-size: 30rpx;
|
|
font-family: Inter;
|
|
color: #ffffff;
|
|
}
|
|
.text_8 {
|
|
line-height: 27.81rpx;
|
|
}
|
|
.text-wrapper_2 {
|
|
padding: 26.25rpx 0;
|
|
flex: 1 1 328.13rpx;
|
|
background-color: #ffb5b8;
|
|
border-radius: 0rpx 93.75rpx 93.75rpx 0rpx;
|
|
height: 82.5rpx;
|
|
}
|
|
.text_9 {
|
|
line-height: 27.79rpx;
|
|
}
|
|
@import url(../../../common/css/global.css);
|
|
</style> |