样式优化

package-lock.json

@@ -2486,9 +2486,9 @@
       "dev": true
     },
     "axios": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.20.0.tgz?cache=0&sync_timestamp=1603468716105&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.20.0.tgz",
-      "integrity": "sha1-BXujDwSIRpSZOozQf6OUz/EcUL0=",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
       "requires": {
         "follow-redirects": "^1.10.0"
       }

package.json

@@ -9,17 +9,17 @@
     "dev-build": "vue-cli-service build --mode dev"
   },
   "dependencies": {
-    "axios": "^0.20.0",
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
-    "dayjs": "^1.9.1",
+    "dayjs": "^1.9.4",
     "js-cookie": "^2.2.1",
     "md5": "^2.3.0",
     "qs": "^6.9.4",
     "timeago.js": "^4.0.2",
-    "vant": "^2.10.9",
+    "vant": "^2.10.11",
     "vue": "^2.6.12",
     "vue-meta": "^2.4.0",
-    "vue-router": "^3.4.6",
+    "vue-router": "^3.4.8",
     "vuex": "^3.5.1"
   },
   "devDependencies": {

src/components/Form.vue

@@ -76,7 +76,7 @@
               <span class="red" v-if="item.required">*</span>
             </template>-->
             <template #input>
-              <upload v-model="ruleForm[item.name]" :max-count="1" />
+              <upload v-model="ruleForm[item.name]" v-bind="item" :max-count="1" />
             </template>
           </van-field>
         </template>
@@ -143,6 +143,10 @@
             </template>-->
           </van-field>
         </template>
+      </div>
+    </template>
+
+    <slot></slot>
 
     <van-popup v-model="picker.visible" position="bottom">
       <van-datetime-picker
@@ -169,9 +173,6 @@
         v-if="picker.fieldType === 'area'"
       />
     </van-popup>
-      </div>
-    </template>
-    <slot></slot>
   </van-form>
 </template>
 

src/components/Upload.vue

@@ -7,7 +7,12 @@
     @delete="onDelete"
     @oversize="oversize"
     v-bind="$attrs"
-  />
+  >
+    <div class="van-uploader__upload">
+      <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
+      <p class="placeholder" v-if="$attrs.placeholder">{{ $attrs.placeholder }}</p>
+    </div>
+  </van-uploader>
 </template>
 
 <script>
@@ -67,6 +72,13 @@ export default {
   display: block;
   width: 100%;
 }
+.placeholder {
+  margin-top: 10px;
+  color: #c9c9c9;
+}
+::v-deep .van-uploader__input-wrapper {
+  flex: 1;
+}
 ::v-deep .van-uploader__upload,
 ::v-deep .van-uploader__preview-image {
   width: 100%;

src/main.js

@@ -5,6 +5,7 @@ import store from '@/store'
 
 import Vant from 'vant'
 import 'vant/lib/index.css'
+
 Vue.use(Vant)
 
 // vue-meta

src/views/activity/Item.vue

@@ -163,7 +163,7 @@ export default {
 .detail-pic {
   margin-left: -15px;
   margin-right: -15px;
-  height: 210px;
+  height: 2.11rem;
   img {
     width: 100%;
     height: 100%;

src/views/create/Activity.vue

@@ -25,7 +25,7 @@ export default {
           name: 'activity_image',
           label: '封面',
           required: true,
-          placeholder: '添加活动封面',
+          placeholder: '尺寸：16：9或750*422',
           rules: [{ required: true, message: '请上传活动封面' }]
         },
         {
@@ -120,7 +120,7 @@ export default {
           required: true,
           placeholder: '请简单描述一下该活动',
           autosize: { maxHeight: 120, minHeight: 120 },
-          maxlength: 100,
+          maxlength: 500,
           showWordLimit: true,
           rules: [{ required: true, message: '请简单描述一下该活动' }]
         }

yarn.lock

@@ -1114,10 +1114,10 @@
     "@types/webpack-sources" "*"
     source-map "^0.6.0"
 
-"@vant/icons@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.3.0.tgz?cache=0&sync_timestamp=1599114567909&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Ficons%2Fdownload%2F%40vant%2Ficons-1.3.0.tgz#94f4c93122fd7331e0e00df55804779aead8c9c2"
-  integrity sha1-lPTJMSL9czHg4A31WAR3murYycI=
+"@vant/icons@1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@vant/icons/-/icons-1.3.2.tgz#f0930010e7aaa9b06b03636fe9b5bc6477ea224b"
+  integrity sha512-uP0nUWw0pyMMGt3L9BO5fEacz/Cn7QIea0/gFoC/jPLv9ufvUxjPsV9HSyyUJsqMJ3qlYLAI/SxZDbmMZA814A==
 
 "@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
   version "1.0.0"
@@ -1821,10 +1821,10 @@ aws4@^1.8.0:
   resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.10.1.tgz#e1e82e4f3e999e2cfd61b161280d16a111f86428"
   integrity sha1-4eguTz6Zniz9YbFhKA0WoRH4ZCg=
 
-axios@^0.20.0:
-  version "0.20.0"
-  resolved "https://registry.npm.taobao.org/axios/download/axios-0.20.0.tgz?cache=0&sync_timestamp=1597979791211&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.20.0.tgz#057ba30f04884694993a8cd07fa394cff11c50bd"
-  integrity sha1-BXujDwSIRpSZOozQf6OUz/EcUL0=
+axios@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.0.tgz#26df088803a2350dff2c27f96fef99fe49442aca"
+  integrity sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==
   dependencies:
     follow-redirects "^1.10.0"
 
@@ -2982,10 +2982,10 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-dayjs@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.9.1.tgz#201a755f7db5103ed6de63ba93a984141c754541"
-  integrity sha512-01NCTBg8cuMJG1OQc6PR7T66+AFYiPwgDvdJmvJBn29NGzIG+DIFxPLNjHzwz3cpFIvG+NcwIjP9hSaPVoOaDg==
+dayjs@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.9.4.tgz#fcde984e227f4296f04e7b05720adad2e1071f1b"
+  integrity sha512-ABSF3alrldf7nM9sQ2U+Ln67NRwmzlLOqG7kK03kck0mw3wlSSEKv/XhKGGxUjQcS57QeiCyNdrFgtj9nWlrng==
 
 de-indent@^1.0.2:
   version "1.0.2"
@@ -8145,13 +8145,13 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-vant@^2.10.9:
-  version "2.10.9"
-  resolved "https://registry.yarnpkg.com/vant/-/vant-2.10.9.tgz#311e7f53541067f45de07c23020ac23339272615"
-  integrity sha512-A+tY8Vq+d/tUbkO1lhZt4Exn+kltnc25akWnWCfa8YdPuQmuxGUCTRFpjJOVOAyfbPRTjgvp5Bt3/Nv9N5Goyw==
+vant@^2.10.11:
+  version "2.10.11"
+  resolved "https://registry.yarnpkg.com/vant/-/vant-2.10.11.tgz#150e0fcbed558e3aa799ebbada704eba9ef2e6b2"
+  integrity sha512-uhaFqQKeiyCCQZy3Tc2SRzLN5R7O+R6kV9KYsmf6TLcvBnNb7AkNyD12RIvdK2X7MNi/wEct842CQI+hmIqybw==
   dependencies:
     "@babel/runtime" "7.x"
-    "@vant/icons" "1.3.0"
+    "@vant/icons" "1.3.2"
     "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
     vue-lazyload "1.2.3"
 
@@ -8231,10 +8231,10 @@ vue-meta@^2.4.0:
   dependencies:
     deepmerge "^4.2.2"
 
-vue-router@^3.4.6:
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.6.tgz#f7bda2c9a43d39837621c9a02ba7789f5daa24b2"
-  integrity sha512-kaXnB3pfFxhAJl/Mp+XG1HJMyFqrL/xPqV7oXlpXn4AwMmm6VNgf0nllW8ksflmZANfI4kdo0bVn/FYSsAolPQ==
+vue-router@^3.4.8:
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.8.tgz#2c06261d35d8075893470352d42d70b6287b8194"
+  integrity sha512-3BsR84AqarcmweXjItxw3jwQsiYNssYg090yi4rlzTnCJxmHtkyCvhNz9Z7qRSOkmiV485KkUCReTp5AjNY4wg==
 
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"