留言反馈页 UI

.env.dev

@@ -1,3 +1,4 @@
 VUE_APP_CLI_MODE=dev
 NODE_ENV=development
-PUBLIC_PATH=/
+PUBLIC_PATH=/
+VUE_APP_DEPLOY_ORIGIN=https://sit-wuxicishan.4dage.com

.env.mytest

@@ -1,3 +1,4 @@
 VUE_APP_CLI_MODE=test
 NODE_ENV=production
 PUBLIC_PATH=./
+VUE_APP_DEPLOY_ORIGIN=https://sit-wuxicishan.4dage.com

src/App.vue

@@ -69,15 +69,24 @@
           :class="{
             active: $route.meta.tabIdx === 8
           }"
+          @click="isShowFeedBack = true"
         >
           留言反馈
         </button>
       </menu>
       <div class="right-button-wrap">
-        <button class="shop" />
+        <button
+          class="shop"
+        />
         <button class="user" />
       </div>
     </div>
+
+    <FeedBack
+      v-show="isShowFeedBack"
+      @close="isShowFeedBack = false"
+    />
+
     <div class="content-area">
       <router-view />
     </div>
@@ -89,6 +98,7 @@ import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import StartUp from '@/components/StartUp.vue'
+import FeedBack from "@/components/FeedBack.vue"
 
 const route = useRoute()
 const router = useRouter()
@@ -104,6 +114,7 @@ if (store.state.loginStatus === store.getters.loginStatusEnum.notLogin && route.
   })
 }
 
+const isShowFeedBack = ref(false)
 </script>
 
 <style lang="less">

src/assets/style/my-reset.css

@@ -54,6 +54,10 @@ input {
   height: initial;
 }
 
+textarea {
+  outline: none;
+}
+
 td {
   vertical-align: inherit;
 }

src/components/FeedBack.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="feed-back">
+    <div class="paper-wrap">
+      <article class="paper">
+        <h1>用户反馈</h1>
+        <h2>User feedback</h2>
+
+        <div class="row">
+          <div class="key">
+            您的称呼
+          </div>
+          <input
+            v-model="name"
+            aotufocus
+            type="text"
+            placeholder="请输入内容，20字以内"
+            maxlength="20"
+          >
+        </div>
+        <div class="row">
+          <div class="key">
+            联系方式
+          </div>
+          <input
+            v-model="contact"
+            type="text"
+            placeholder="请输入内容，20字以内"
+            maxlength="20"
+          >
+        </div>
+        <div class="row">
+          <div class="key">
+            反馈内容
+          </div>
+          <textarea
+            v-model="feedback"
+            placeholder="请输入省市区街道，50字以内"
+            maxlength="50"
+          />
+        </div>
+        <div class="splitter" />
+        <div class="row">
+          <div class="key veri-code-key">
+            验证码
+          </div>
+          <input
+            v-model="veriCode"
+            class="veri-code-input"
+            type="text"
+            maxlength="20"
+            placeholder="请输入内容"
+          >
+          <button
+            class="get-veri-code"
+            @click="onClickVerifiCode"
+          >
+            <img
+              v-if="isShowVerifiCode"
+              class=""
+              :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/api/show/getRandCode`"
+              alt=""
+              draggable="false"
+            >
+          </button>
+        </div>
+        <div class="btn-group">
+          <button
+            class="cancel"
+            @click="emit('close')"
+          >
+            取消
+          </button>
+          <button
+            class="confirm"
+            :disabled="!canSubmit"
+            @click="onSubmit"
+          >
+            提交
+          </button>
+        </div>
+      </article>
+      <div class="deco" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, nextTick, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const emit = defineEmits(['close'])
+
+const isShowVerifiCode = ref(true)
+const onClickVerifiCode = utils.throttle(() => {
+  isShowVerifiCode.value = false
+  nextTick(() => {
+    isShowVerifiCode.value = true
+  })
+}, 333)
+
+const name = ref('')
+const contact = ref('')
+const feedback = ref('')
+const veriCode = ref('')
+
+const canSubmit = computed(() => {
+  return name.value && contact.value && feedback.value && veriCode.value
+})
+
+function onSubmit() {
+  emit('close')
+}
+</script>
+
+<style lang="less" scoped>
+.feed-back{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(10px);
+  z-index: 10;
+  overflow: auto;
+  >div.paper-wrap{
+    position: absolute;
+    left: 50%;
+    top: 60px;
+    transform: translate(-50%, 0);
+    width: 925px;
+    height: 810px;
+    z-index: 0;
+    >article.paper{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient( 180deg, rgba(200,200,200, 1) 0%, rgba(100,100,100, 1) 100%);
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 73px;
+      padding-bottom: 64px;
+      >h1{
+        position: absolute;
+        top: -37px;
+        left: 36px;
+        font-family: Source Han Serif CN, Source Han Serif CN;
+        font-weight: bold;
+        font-size: 32px;
+        color: #FFFFFF;
+        line-height: 38px;
+      }
+      >h2{
+        position: absolute;
+        top: 6px;
+        left: 68px;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #b0b0b0;
+        line-height: 16px;
+      }
+      >.row{
+        display: flex;
+        align-items: center;
+        margin-bottom: 37px;
+        >.key{
+          font-family: Source Han Serif CN, Source Han Serif CN;
+          font-weight: bold;
+          font-size: 24px;
+          color: #424A4A;
+          line-height: 28px;
+          letter-spacing: 7px;
+          margin-right: 34px;
+        }
+        >.key.veri-code-key{
+          font-family: Source Han Serif CN, Source Han Serif CN;
+          font-weight: bold;
+          font-size: 24px;
+          color: #FFFFFF;
+          line-height: 1px;
+          letter-spacing: 22px;
+          margin-right: 15px;
+        }
+        >input, >textarea{
+          width: 506px;
+          background: rgba(213,221,215,0.5);
+          box-shadow: 0px 1px 3px 0px rgba(255,255,255,0.25);
+          border-radius: 3px 3px 3px 3px;
+          border: 1px solid;
+          border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.15)) 1 1;
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: 400;
+          font-size: 16px;
+          color: #000000;
+          line-height: 19px;
+          padding-left: 20px;
+          padding-right: 2px;
+          &::placeholder{
+            opacity: 0.3;
+          }
+        }
+        >input {
+          height: 51px;
+        }
+        >textarea{
+          width: 506px;
+          height: 238px;
+          resize: none;
+          padding-top: 13px;
+          padding-bottom: 13px;
+        }
+        >input.veri-code-input{
+          width: 338px;
+          margin-right: 15px;
+        }
+        >button.get-veri-code{
+          width: 155px;
+          height: 51px;
+          border-radius: 3px;
+          background-color: #fff;
+          >img{
+            height: 100%;
+            width: 100%;
+            object-fit: contain;
+          }
+        }
+      }
+      >.splitter{
+        width: 830px;
+        border: 1px solid #B5C2B9;
+        opacity: 0.6;
+        margin-bottom: 40px;
+      }
+      >.btn-group{
+        >button.cancel{
+          width: 194px;
+          height: 94px;
+          padding-bottom: 9px;
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: 400;
+          font-size: 20px;
+          color: #FFFFFF;
+          line-height: 23px;
+          background-image: url(@/assets/images/button-cancel-bg.png);
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center center;
+        }
+        >button.confirm{
+          width: 194px;
+          height: 94px;
+          padding-bottom: 9px;
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: 400;
+          font-size: 20px;
+          color: #9C6D42;
+          line-height: 23px;
+          background-image: url(@/assets/images/button-confirm-bg.png);
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center center;
+          &[disabled]{
+            opacity: 0.7;
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+    >.deco{
+      position: absolute;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
+      left: -14px;
+      top: 14px;
+      border: 1px solid rgba(255, 255, 255, 0.5);
+    }
+  }
+}
+</style>

src/router/index.js

@@ -26,7 +26,7 @@ const routes = [
         path: '/relic-search',
         name: 'RelicSearch',
         component: RelicSearch,
-      }
+      },
     ],
   },
   // {

src/views/HomeView.vue

@@ -134,6 +134,7 @@
       alt=""
       draggable="false"
     >
+    <button class="arrow-down" />
 
     <router-view />
   </div>
@@ -444,7 +445,9 @@ const activeHotRelicIdx = ref(0)
 
 <style lang="less" scoped>
 .home {
-  position: relative;
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
   display: flex;
@@ -456,6 +459,8 @@ const activeHotRelicIdx = ref(0)
     flex-direction: column;
     padding-top: 5vh;
     padding-bottom: 18vh;
+    position: relative;
+    z-index: 1;
     >.title{
       flex: 0 0 auto;
       margin-bottom: 22px;
@@ -532,6 +537,8 @@ const activeHotRelicIdx = ref(0)
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
+    z-index: 1;
     >.img-list-wrap{
       background-image: url(@/assets/images/home-center-img-wrap-bg.png);
       background-size: contain;
@@ -564,6 +571,7 @@ const activeHotRelicIdx = ref(0)
     padding-top: 5vh;
     padding-bottom: 18vh;
     position: relative;
+    z-index: 1;
     >.relic-detail{
       position: relative;
       width: 406px;
@@ -700,5 +708,18 @@ const activeHotRelicIdx = ref(0)
     object-position: center top;
     pointer-events: none;
   }
+  >.arrow-down{
+    position: absolute;
+    left: 50%;
+    bottom: 12px;
+    transform: translate(-50%, 0);
+    width: 50px;
+    height: 50px;
+    background-image: url(@/assets/images/icon_arrow-down.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    z-index: 5;
+  }
 }
 </style>

src/views/LoginView.vue

@@ -85,7 +85,7 @@ function onClickAsVisitor() {
     >.row-1{
       display: flex;
       align-items: center;
-      margin-bottom: 12px;
+      margin-bottom: 4px;
       >.input-wrap{
         width: 283px;
         height: 75px;
@@ -97,7 +97,7 @@ function onClickAsVisitor() {
         align-items: center;
         padding-left: 27px;
         padding-right: 22px;
-        margin-right: 10px;
+        margin-right: 7px;
         >input{
           width: 170px;
           font-family: Source Han Sans CN, Source Han Sans CN;