优化页面

pages/NewAddedPk/NewAddedPk.vue

@@ -1,6 +1,6 @@
 <template>
-  <view v-if="Display" class="Mask" @click="open()">
-    <view @click.stop>
+  <view v-if="Display" class="Mask create-module" @click="open()">
+    <view @click.stop class="containers">
       <view class="container">
         <image
           class="Fork"
@@ -9,49 +9,92 @@
           mode="scaleToFill"
         />
         <view class="Title">发布新PK</view>
-        <view class="Individual">
-          <view class="NameAnchor">
-            <input class="NameAnchorcss" @input="NameAnchor" placeholder="主播名称" />
-            <view v-if="nameAnchor === '' && Hint === true" class="Hint"
-              >请填写主播名称</view
-            >
-          </view>
-
-          <view class="Gender">
-            <wht-select
-              style="width: 300rpx"
-              @change="gender"
-              :options="Gender"
-              placeholder="性别"
-            />
-            <view v-if="genders === '' && Hint === true" class="Hint">请选择性别</view>
-          </view>
+        <!-- <view class="Individual"> -->
+        <view class="NameAnchor">
+          <input
+            class="NameAnchorcss"
+            cursor-color="#ffffff"
+            placeholder-style="color:#ffffff"
+            @input="NameAnchor"
+            placeholder="主播名称"
+          />
+          <view v-if="nameAnchor === '' && Hint === true" class="Hint"
+            >请填写主播名称</view
+          >
         </view>
 
+       
+        <!-- </view> -->
+
         <view class="Accountnumber">
           <view class="Coins country">
             <wht-select
-              style="width: 300rpx"
+            style="width: 350rpx"
+              backgroundColor="#fff70065"
+              borderRadius="20"
+              placeholderColor="#ffffff"
+              textColor="#7cba59"
+              borderColor="#ffffff"
               @change="country"
               :options="Country"
-              filterable
+              filterable= true
               placeholder="请选择国家"
             />
             <view v-if="countrys === '' && Hint === true" class="Hint">请选择国家</view>
           </view>
-
-          <view class="Coins">
+          <view class="Gender">
+         <view class="Gendercs">
+          <view class="Gendercss">
+            <wht-select
+              style="width: 300rpx"
+              backgroundColor="#ffaa0082"
+              borderRadius="20"
+              placeholderColor="#ffffff"
+              textColor="#ffffff"
+              borderColor="#ffffff"
+              @change="gender"
+              :options="Gender"
+              placeholder="性别"
+            />
+          </view>
+          <view class="Gendericoncss">
+            <image
+            v-if="genders === 0"
+            class="Gendericon"
+              src="../../static/ask.png"
+              mode="scaleToFill"
+            />
+            <image
+            v-if="genders === 1"
+            class="Gendericon"
+              src="../../static/man.png"
+              mode="scaleToFill"
+            />
+            <image
+            v-if="genders === 2"
+            class="Gendericon"
+              src="../../static/girl.png"
+              mode="scaleToFill"
+            /> 
+          </view>
+         </view>
+         <view v-if="genders === 0 && Hint === true" class="Hintcss">请选择性别</view>
+        </view>
+          
+        </view>
+        
+        <view class="goldCoin">
             <view class="number-box">
-              <view class="number-box-title">金币:</view>
-              <uni-number-box v-model="numberCoins"></uni-number-box>
+              <view class="number-box-title">金币数量:</view>
+              <uni-number-box background="#2bff001e" v-model="numberCoins"></uni-number-box>
+              <view class="number-box-title">单位:</view>
               <view class="number-box-unit">K</view>
             </view>
             <view v-if="numberCoins === '' && Hint === true" class="Hint"
               >请填写金币数量</view
             >
           </view>
-        </view>
-
+          
         <view class="time">
           <uni-datetime-picker
             type="datetime"
@@ -65,6 +108,8 @@
 
         <view class="Remarkscss">
           <uni-easyinput
+           :styles="styles"
+           :placeholderStyle="placeholderStyle"
             type="textarea"
             v-model="remarks"
             placeholder="备注"
@@ -85,7 +130,7 @@ import request from "../../components/request.js";
 export default {
   data() {
     return {
-      genders: "", //性别
+      genders: 0, //性别
       Gender: [
         { label: "男", value: 1 },
         { label: "女", value: 2 },
@@ -97,8 +142,15 @@ export default {
       remarks: "", //备注
       Display: false,
       Hint: false,
-      datetimesingle: "",//日期
+      datetimesingle: "", //日期
       id: null, //用户id
+      sendingTime: "", //发送时间
+      placeholderStyle: "color:#ffffff;font-size:14px",
+      styles: {
+        backgroundColor: "#2bff001e",
+        color: "#ffffff",
+        borderColor: "#00bd069d",
+      }
     };
   },
   onLoad() {
@@ -146,7 +198,7 @@ export default {
     },
 
     async Publish() {
-      //判断是否为空 
+      //判断是否为空
       if (
         this.nameAnchor === "" ||
         this.genders === "" ||
@@ -163,7 +215,17 @@ export default {
       if (isNaN(timestamp)) {
         throw new Error(`Invalid date format: ${this.datetimesingle}`);
       }
-      this.datetimesingle = Math.floor(timestamp / 1000);
+      this.sendingTime = Math.floor(timestamp / 1000);
+      const secondsTimestamp = Math.floor(Date.now() / 1000);
+
+      if (this.sendingTime < secondsTimestamp) {
+        uni.showToast({
+          title: "日期不能早于当前时间",
+          icon: "none",
+          duration: 2000,
+        });
+        return;
+      }
       //发送请求
       uni.showLoading({
         title: "发布中...",
@@ -189,7 +251,7 @@ export default {
         this.Display = false;
         this.Hint = false;
         this.nameAnchor = "";
-        this.genders = "";
+        this.genders = 0;
         this.numberCoins = "";
         this.remarks = "";
         this.datetimesingle = "";
@@ -207,14 +269,28 @@ export default {
           duration: 2000,
         });
       }
-
-
     },
   },
 };
 </script>
 
 <style scoped>
+/* 定义动画 */
+@keyframes slide-in {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* 应用动画到组件 */
+.create-module {
+  animation: slide-in 0.3s ease-in-out;
+}
 .Mask {
   width: 100vw;
   height: 100vh;
@@ -223,15 +299,29 @@ export default {
   flex-direction: column-reverse;
 }
 .Hint {
-  color: red;
+  color: rgb(255, 0, 0);
   font-size: 20rpx;
+  margin-left: 30rpx;
+  margin-top: 10rpx;
+}
+.Hintcss{
+  color: rgb(255, 0, 0);
+  font-size: 20rpx;
+  margin-left: 30rpx;
+  margin-top: 20rpx;
+}
+.containers {
+  background-color: #ffffff;
+  border-radius: 50rpx;
 }
 .container {
   display: flex;
-  background-color: #fff;
+  background-image: linear-gradient(135deg, #00ff4025, #00d5ff3b);
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  height: 1300rpx;
+  border-radius: 50rpx;
+  box-shadow: 0 0 10rpx #ccc;
 }
 .Fork {
   width: 50rpx;
@@ -242,58 +332,131 @@ export default {
 }
 .Title {
   width: 100%;
-  height: 30rpx;
-  font-size: 50rpx;
+  height: 80rpx;
+  font-size: 70rpx;
   font-weight: bold;
   text-align: center;
   margin-top: 40rpx;
   margin-bottom: 40rpx;
+  /* 设置渐变背景 */
+  background-image: linear-gradient(135deg, #ffff00, #00d9ff);
+  /* 关键属性组合 */
+  -webkit-background-clip: text; /* 兼容 iOS/Android */
+  background-clip: text;
+  /* 文字颜色设为透明 */
+  color: transparent;
+  /* 防止背景溢出 */
+  display: inline-block;
+  padding: 8rpx 16rpx;
+  text-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.2);
 }
 .Individual {
   display: flex;
   /* justify-content: center; */
 }
 .NameAnchor {
+  width: 90%;
   margin: 40rpx;
 }
 .time {
   width: 90%;
   margin-left: 5%;
+  margin-top: 50rpx;
 }
 .NameAnchorcss {
-  width: 300rpx;
+  width: 99%;
   height: 85rpx;
-  border: 1rpx solid #ccc;
-  border-radius: 10rpx;
+  background-image: linear-gradient(135deg, #d9ff007a, #00ffb364);
+  border-top: 2rpx solid #ffbf0049;
+  border-bottom: 2rpx solid #125b003a;
+  border-left: 2rpx solid #ffbf0050;
+  border-right: 2rpx solid #125b0036;
+  border-radius: 30rpx;
   text-align: center;
+  color:#ffffff;
 }
 .Gender {
-  width: 300rpx;
-  height: 80rpx;
-  margin: 40rpx;
-}
-.Accountnumber {
-  display: flex;
-}
-.Coins {
-  margin-top: 40rpx;
-  margin-bottom: 40rpx;
-  width: 400rpx;
-  height: 65rpx;
+  width: 310rpx;
   display: flex;
   flex-direction: column;
   justify-content: center;
+}
+.Gendercs{
+  display: flex;
+  justify-content: center;
   /* align-items: center; */
 }
-.country{
-  margin-left: 40rpx;
+.Gendercss{
+  width: 200rpx;
+  height: 60rpx;
+}
+.Gendericoncss{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  border: 1rpx solid #ff9d0067;
+  margin-left: 20rpx;
+  margin-top: 10rpx;
+}
+.Gendericon{
+  width: 40rpx;
+  height: 40rpx;
+  /* margin-top: 10rpx;
+  margin-right: 40rpx; */
+}
+.Accountnumber {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 60rpx;
+  margin-top: 50rpx;
+}
+.Coins {
+  width: 330rpx;
+  height: 65rpx;
+  /* display: flex; */
+  margin-right: 50rpx;
+  /* flex-direction: column; */
+}
+.country {
+  margin-left:10rpx;
+}
+.goldCoin {
+  width: 100%;
+  height: 100rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .number-box {
   display: flex;
+  justify-content: center;
   text-align: center;
 }
 .number-box-title {
-  margin-right: 20rpx;
+  /* margin-right: 20rpx; */
+   /* 设置渐变背景 */
+   background-image: linear-gradient(135deg, #00ff227a, #a200ff64);
+  /* 关键属性组合 */
+  -webkit-background-clip: text; /* 兼容 iOS/Android */
+  background-clip: text;
+  /* 文字颜色设为透明 */
+  color: transparent;
+  /* 防止背景溢出 */
+  display: inline-block;
+  padding: 8rpx 16rpx;
+}
+.number-box-unit {
+  color: #ffb30067;
+  width: 48rpx;
+  height: 48rpx;
+  border: 1rpx solid #ff9d006f;
+  border-radius: 50%;
+  line-height: 48rpx;
+  text-align: center;
+  /* color: #003cff5a; */
 }
 .Remarkscss {
   width: 90%;
@@ -303,12 +466,21 @@ export default {
   margin-bottom: 50rpx;
   border-radius: 10rpx;
 }
+
 .Publish {
-  margin-bottom: 50rpx;
+  margin-bottom: 40rpx;
   width: 90%;
   margin-left: 5%;
 }
 .Publishcss {
-  background-color: #0048ff94;
+  background-image: linear-gradient(135deg, #00ffb354, #c300ff37);
+  /* color: #33ff00; */
+  color: #ffffff;
+  border-bottom: 2rpx solid #c300ff37;
+  border-top: 2rpx solid #00ffb354;
+  border-right: 2rpx solid #c300ff37;
+  border-left: 2rpx solid #00ffb354;
+  font-weight: bold;
+  border-radius: 50rpx;
 }
 </style>

pages/Setting/Setting.vue

@@ -10,6 +10,7 @@
       @blur="inputName"
     />
     <button class="weui-btn" @click="wxLogin">修改</button>
+    <button class="weui-btn" @click="cancel">取消</button>
   </view>
 </template>
 
@@ -46,6 +47,11 @@ export default {
     });
   },
   methods: {
+    cancel() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
     // 输入昵称
     inputName(e) {
       this.name = e.detail.value;

pages/pkDetail/pkDetail.vue

@@ -50,7 +50,6 @@
 import formatDate from "../../components/formatDate.js";
 import VerifyLogin from "../../components/VerifyLogin.js";
 export default {
-  inject: ['$global'],
   data() {
     return {
       item: {},