积分表UI修改

src/components/Signin.vue

@@ -8,6 +8,10 @@ import useStore from "@/store";
 const store = useStore();
 const { updateUser, updateDevice } = store;
 const props = defineProps({
+  noBg: {
+    type: Boolean,
+    default: false,
+  },
   onClose: {
     type: Function,
     default: () => {},
@@ -106,9 +110,9 @@ onShow(() => {
 </script>
 
 <template>
-  <view class="container">
-    <view class="avatar">
-      <text>头像:</text>
+  <view class="container" :style="{ background: noBg ? '#fff' : 'none' }">
+    <view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }">
+      <text :style="{ color: noBg ? '#666' : '#fff' }">头像:</text>
       <button
         open-type="chooseAvatar"
         @chooseavatar="onChooseAvatar"
@@ -116,17 +120,19 @@ onShow(() => {
         hover-class="none"
       >
         <Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
-        <text v-else>点击获取</text>
+        <text v-else :style="{ color: noBg ? '#666' : '#fff9' }">点击获取</text>
+        <image src="../static/enter.png" mode="widthFix" />
       </button>
     </view>
-    <view class="nickname">
-      <text>昵称:</text>
+    <view class="nickname" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }">
+      <text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
       <input
         type="nickname"
         placeholder="请输入昵称"
-        placeholder-style="color: #fff9"
+        :placeholder-style="{ color: noBg ? '#666' : '#fff9' }"
         @change="onNicknameChange"
         @blur="onNicknameBlur"
+        :style="{ color: noBg ? '#333' : '#fff' }"
       />
     </view>
     <SButton :rounded="20" width="80vw" :onClick="handleLogin">
@@ -147,13 +153,21 @@ onShow(() => {
       </block>
     </SButton>
     <view class="protocol" @click="handleAgree">
-      <view v-if="!agree" />
+      <view v-if="!agree" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }" />
       <image v-if="agree" src="../static/checked.png" mode="widthFix" />
       <view>
         <text>已同意并阅读</text>
-        <view @click.stop="openServiceLink">《用户协议》</view>
+        <view
+          @click.stop="openServiceLink"
+          :style="{ color: noBg ? '#333' : '#fff' }"
+          >《用户协议》</view
+        >
         <text>及</text>
-        <view @click.stop="openPrivacyLink">《隐私协议》</view>
+        <view
+          @click.stop="openPrivacyLink"
+          :style="{ color: noBg ? '#333' : '#fff' }"
+          >《隐私协议》</view
+        >
         <text>内容</text>
       </view>
     </view>
@@ -168,6 +182,8 @@ onShow(() => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  border-top-left-radius: 24rpx;
+  border-top-right-radius: 24rpx;
 }
 .avatar,
 .nickname {
@@ -175,7 +191,7 @@ onShow(() => {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
-  border-bottom: 1px solid #fff3;
+  border-bottom: 1rpx solid #fff3;
 }
 .avatar {
   margin: 0;
@@ -183,7 +199,6 @@ onShow(() => {
 .avatar > text,
 .nickname > text {
   width: 20%;
-  color: #fff9;
   font-size: 14px;
   line-height: 55px;
 }
@@ -194,7 +209,6 @@ onShow(() => {
 .nickname > input {
   flex: 1;
   font-size: 14px;
-  color: #fff;
   line-height: 55px;
 }
 .wechat-icon {
@@ -226,13 +240,16 @@ onShow(() => {
   display: flex;
   align-items: center;
 }
-.protocol > view:last-child > view {
-  color: #fff;
-}
 .login-btn {
   line-height: 55px;
   width: 80%;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.login-btn > image {
+  width: 28rpx;
+  height: 28rpx;
 }
 .loading {
   width: 25px;