样式优化

Yi.Vue3.x.Vant/src/view/login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="div-top">
-    <span class="title">农夫山泉</span>
+    <span class="title">大白荟</span>
     <br />
     <span class="subtitle">农夫山泉有点甜</span>
   </div>
@@ -16,18 +16,20 @@
       class="van-field-password"
       v-model="loginForm.password"
       label="密码"
+      type="password"
       placeholder="请输入密码"
     />
-    <van-button type="primary" @click="login">进入农夫山泉</van-button>
+    <van-button type="primary" @click="login">进入大白荟</van-button>
     <p>其他方式登录<van-icon name="arrow" /></p>
 
-    <van-row style="margin-top: 6rem">
+    <van-row class="row-bottom" style="margin-top: 6rem">
       <van-col span="24"><p>第三方登录</p></van-col>
-      <van-col span="3"></van-col>
-      <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
-      <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
-      <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
-      <van-col span="3"></van-col>
+      <van-col span="2"></van-col>
+      <van-col span="5"><van-icon name="smile-o" size="2rem" /></van-col>
+      <van-col span="5"><van-icon name="smile-o" size="2rem" /></van-col>
+      <van-col span="5"><van-icon name="smile-o" size="2rem" /></van-col>
+      <van-col span="5"><van-icon name="smile-o" size="2rem" /></van-col>
+      <van-col span="2"></van-col>
     </van-row>
   </div>
 </template>
@@ -59,6 +61,7 @@ const login = () => {
       router.push({ path: redirect.value || "/" });
     })
     .catch((response:any) => {
+      loginForm.value.password="";
       Toast({
         message: response.message,
         position: "bottom",
@@ -73,7 +76,7 @@ const login = () => {
 </script>
 <style scoped>
 .div-top {
-  background-color: aqua;
+  background-color: #FF689B;
   position: absolute;
   top: 0;
   left: 0;
@@ -81,7 +84,7 @@ const login = () => {
   bottom: 60%;
 }
 .div-bottom {
-  background-color: bisque;
+  background-color: #FFFFFF;
   position: absolute;
   top: 25%;
   left: 0;
@@ -98,12 +101,14 @@ const login = () => {
   transform: translateX(-50%);
   font-size: 1.8rem;
   font-weight: bolder;
+  color: #FFFFFF;
 }
 .subtitle {
   transform: translateX(-50%);
   position: absolute;
   top: 30%;
   font-weight: lighter;
+  color: #FFFFFF;
 }
 .van-field-username {
   margin-top: 2rem;
@@ -113,17 +118,21 @@ const login = () => {
 }
 h5 {
   text-align: left;
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   font-weight: bolder;
 }
 .div-bottom .van-button {
   margin-top: 1rem;
   width: 100%;
   border-radius: 0.4rem;
+  background-color: #FF689B;
+  border: 0;
 }
 .div-bottom p {
   text-align: center;
+  color: #666666;
 }
 .row-bottom {
+  color:  #FF689B;
 }
 </style>

Yi.Vue3.x.Vant/src/view/main/recommend.vue

@@ -156,14 +156,15 @@ const getList = () => {
 </script>
 <style scoped>
 .list {
-  background-color: #efefef;
+  background-color: #F4F4F4;
+
 }
 .row {
   background-color: white;
   padding-top: 1rem;
-  margin-bottom: 1rem;
   padding-left: 1rem;
   padding-right: 1rem;
+  margin-bottom: 0.6rem;
 }
 .rowBody {
   text-align: left;
@@ -196,7 +197,7 @@ const getList = () => {
   font-size: large;
 }
 .bottomRow {
-  color: #979797;
+  color: #999999;
 }
 .down {
   text-align: right;

Yi.Vue3.x.Vant/src/view/my.vue

@@ -33,14 +33,14 @@
       <van-row class="btnRow">
         <van-col span="12">
           <van-button class="btn">
-            <van-icon name="bag" size="1.8rem" /> 我的购物<van-icon
+            <van-icon name="bag" size="1.8rem" /> <span>我的购物</span><van-icon
               name="arrow"
               size="1.2rem" /></van-button
         ></van-col>
 
         <van-col span="12">
           <van-button class="btn"
-            ><van-icon name="send-gift" size="1.8rem" />我的签到<van-icon
+            ><van-icon name="send-gift" size="1.8rem" /> <span>我的签到</span><van-icon
               name="arrow"
               size="1.2rem" /></van-button
         ></van-col>
@@ -177,6 +177,22 @@ const outLog = () => {
 
 </script>
 <style scoped>
+.bodyCol
+{
+  color: #9B9B9B;
+}
+.bodyCol span{
+  color: black;
+  font-size:larger;
+  font-weight: 500;
+}
+.btn .van-icon{
+  color: #FF689B;
+}
+.btn span{
+  font-size:medium;
+  font-weight:600;
+}
 .grid {
   width: 100%;
   margin-top: 1rem;
@@ -198,7 +214,7 @@ const outLog = () => {
 }
 .subtitle {
   line-height: 4rem;
-  color: #cbcbcb;
+  color: #9B9B9B;
 }
 .bodyCol {
   text-align: center;
@@ -212,6 +228,7 @@ const outLog = () => {
   background-color: #ffffff;
   border: none;
   color: black;
+
 }
 .btnRow {
   margin-top: 1.5rem;

Yi.Vue3.x.Vant/src/view/send/imageText.vue

@@ -9,7 +9,7 @@
             </router-link>
           </van-col>
           <van-col span="18"><span>发图文</span></van-col>
-          <van-col span="3" @click="send">发布</van-col>
+          <van-col span="3" @click="send" :style="{color: isSend?'#FE70A0':'#979797'}">发布</van-col>
         </van-row>
       </van-sticky>
 
@@ -22,7 +22,7 @@
           label-width="0"
           :show-word-limit="true"
           maxlength="500"
-          placeholder="每一天，都是为了下一天"
+          placeholder="大于5字，每一天，都是为了下一天"
         />
       </van-cell-group>
       <van-row class="body-row">
@@ -31,7 +31,7 @@
         </van-col>
         <van-col span="4"></van-col>
         <van-col span="10"
-          ><span>选择更多人看到</span>
+          ><span class="right-span">选择更多人看到</span>
           <van-icon name="arrow" size="1.2rem" />
         </van-col>
       </van-row>
@@ -46,10 +46,11 @@
   </transition>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, reactive, toRefs } from "vue";
+import { ref, onMounted, reactive, toRefs,watch } from "vue";
 import { ArticleEntity } from "@/type/interface/ArticleEntity.ts";
 import fileApi from "@/api/fileApi.ts";
 import articleApi from "@/api/articleApi.ts";
+import { Toast } from "vant";
 import { useRouter } from 'vue-router'
 const router = useRouter();
 const form = reactive<ArticleEntity>({
@@ -59,6 +60,7 @@ const form = reactive<ArticleEntity>({
   isDeleted: false,
 });
 
+const isSend=ref(false)
 const { images, content } = toRefs(form);
 const fileList = ref([]);
 const visible = ref<boolean>(false);
@@ -91,17 +93,39 @@ file.forEach((f:any) => {
 };
 
 const send = () => {
+  if(form.content.length<5)
+  {
+    Toast({
+        message: "请输入至少5个字符",
+        position: "bottom",
+      });
+  }
+  else
+  {
     articleApi.add(form).then((response:any)=>{
       router.push({ path: '/recommend'});
     })
+  }
 
 };
+
+watch(()=>form.content,(newValue,oldValue)=>{
+ if(newValue.length<5)
+ {
+  isSend.value=false
+ }
+ else
+ {
+  isSend.value=true
+ }
+ console.log(isSend.value?'#FFF':'#111')
+})
 </script>
 <style scoped>
 .head-row {
   background-color: #f8f8f8;
 
-  padding: 2rem 1rem 1.5rem 1rem;
+  padding: 1.2rem 1rem 0.8rem 1rem;
 }
 
 .head-row span {
@@ -135,4 +159,8 @@ const send = () => {
 .img-col {
   text-align: left;
 }
+.right-span
+{
+  color: #979797;
+}
 </style>