Task：礼品赠送/送礼

2025-02-17 23:36:27 +08:00
parent 044c1a0863
commit 5dc1f5ad92
4 changed files with 159 additions and 2 deletions
@@ -0,0 +1,102 @@
+<template>
+  <view class="gift-page">
+    <view class="top-card">
+      <view class="v12-justify-between v12-pa-2">
+        <view>
+          <view></view>
+          <view class="v12-font-28 v12-secondary-dark-text">送礼寄语</view>
+        </view>
+        <view class="v12-primary-text v12-font-26">
+          <view>默认封面</view>
+          <view>
+          </view>
+        </view>
+      </view>
+      <view class="v12-px-2">
+        <view class="line"></view>
+      </view>
+      <view class="v12-pa-2 ">
+        <textarea class="v12-font-28  v12-secondary-dark-text" placeholder="礼笺轻启，礼藏心意" name="" id="" cols="30" rows="10"></textarea>
+      </view>
+    </view>
+    <view class="gift-good-card"></view>
+    <view class="swich-btn">
+      <view class="v12-font-28 v12-dark-text">是否支持好友转赠</view>
+      <view>
+        <u-switch v-model="value3" ></u-switch>
+      </view>
+    </view>
+    
+    <view class="btn-wrap v12-mt-16 v12-justify-center">
+      <view class="gift-submit">付款并赠送</view>
+    </view>
+    <view class="tip-wrap v12-justify-center">
+      <view class="tip-text v12-mr-1">好友未收下礼包，将于24小时后自动退款</view>
+      <u-icon name="error-circle" color="#666" size="28rpx"></u-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+.tip-wrap{
+  position: absolute;
+  bottom: 100rpx;
+  left: 0;
+  margin: auto;
+  right: 0;
+  align-items: center;
+}
+.tip-text{
+  font-family: Source Han Sans SC;
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #666666;
+  line-height: 36rpx;
+}
+.gift-submit{
+  width: 240rpx;
+  height: 80rpx;
+  background: rgba(197,39,51,1);
+  border-radius: 16rpx;
+  color: #fff;
+  line-height: 80rpx;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+.gift-page{
+  padding: 10rpx 20rpx;
+}
+.top-card{
+  height: 280rpx;
+  background: #fff;
+  border-radius: 16rpx;
+}
+.line{
+  width: 100%;
+  height: 2rpx;
+  background: #d2d2d2;
+}
+.gift-good-card{
+  height: 240rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  margin-top: 30rpx;
+}
+.swich-btn{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60rpx;
+  background: #fff;
+  border-radius: 30rpx;
+  padding: 5rpx 20rpx;
+  margin-top: 30rpx;
+}
+</style>
@@ -0,0 +1,22 @@
+<template>
+  <view>
+    <view class="top-card"></view>
+  </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+.top-card{
+  width: 710rpx;
+  height: 280rpx;
+  background: #fff;
+  border-radius: 16rpx;
+}
+
+
+</style>