样式优化

src/App.vue

@@ -158,6 +158,10 @@ body,
   padding: 16px 0;
   text-align: right;
 }
+.ivu-radio-group {
+  display: flex;
+  justify-content: flex-start;
+}
 .ivu-form-item-content {
   line-height: 34px;
 }

src/views/layout.vue

@@ -50,6 +50,9 @@ body {
   margin: 0;
   padding: 0;
 }
+.top_header_root {
+  background-color: #2d8cf0;
+}
 .header_html_root {
   display: flex;
   justify-content: space-between;
@@ -63,19 +66,20 @@ body {
 }
 .header_html_root .header_html_item {
   padding: 0 10px;
-  color: #333;
-  border-bottom: 4px solid transparent;
+  color: #fff;
+  // border-bottom: 4px solid transparent;
   cursor: pointer;
 }
 .header_html_root .log_out {
   padding: 0 10px;
   color: #ff001e;
-  border-bottom: 4px solid transparent;
+  // border-bottom: 4px solid transparent;
   cursor: pointer;
 }
 .header_html_root .header_html_item:hover,
 .header_html_root .header_html_item.router-link-active {
-  border-bottom: 4px solid #2d8cf0;
+  background-color: #065fbe;
+  // border-bottom: 4px solid #2d8cf0;
 }
 .layout_out {
   max-height: calc(100vh - 54px);

src/views/login/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="login_bg">
     <div class="loginFormBox">
       <Form
         ref="loginForm"
         :model="loginInfo"
         :rules="formRules"
-        :label-width="80"
+        :label-width="60"
       >
         <FormItem label="账号" prop="loginname">
           <Input
@@ -119,11 +119,27 @@ export default {
 </script>
 
 <style scoped lang="less">
+.login_bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff;
+  background-image: url("@/assets/img/login.jpg");
+}
 .loginFormBox {
-  position: relative;
-  margin: 0 auto;
-  padding-top: 150px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  padding: 40px 40px 40px 30px;
   width: 400px;
+  height: 290px;
+  background-color: #fff;
+  border-radius: 10px;
 }
 .login_btn_box {
   text-align: center;

src/views/news/index.vue

@@ -96,7 +96,15 @@
               v-if="addForm.newspic"
               :src="$api.showImageUrl + addForm.newspic"
             />
-            <Button v-else icon="ios-cloud-upload-outline">上传封面</Button>
+            <!-- <Button v-else icon="ios-cloud-upload-outline">上传封面</Button> -->
+            <div class="upload_img" v-else>
+              <Icon
+                type="ivu-icon ivu-icon- iconfont icon-shangchuan"
+                size="42"
+                color="#e6e6e6"
+              />
+              <p class="shangchuan_btn">上传图片</p>
+            </div>
           </Upload>
         </FormItem>
         <FormItem label="置顶" prop="newsup">
@@ -171,7 +179,15 @@
               v-if="modifyForm.newspic"
               :src="$api.showImageUrl + modifyForm.newspic"
             />
-            <Button v-else icon="ios-cloud-upload-outline">上传封面</Button>
+            <!-- <Button v-else icon="ios-cloud-upload-outline">上传封面</Button> -->
+            <div class="upload_img" v-else>
+              <Icon
+                type="ivu-icon ivu-icon- iconfont icon-shangchuan"
+                size="42"
+                color="#e6e6e6"
+              />
+              <p class="shangchuan_btn">上传图片</p>
+            </div>
           </Upload>
         </FormItem>
         <FormItem label="置顶" prop="newsup">
@@ -600,6 +616,27 @@ export default {
   padding: 16px 0;
   text-align: right;
 }
+.upload_img {
+  padding-top: 10px;
+  width: 198px;
+  height: 98px;
+  text-align: center;
+  object-fit: cover;
+  border: 1px solid #dcdee2;
+  .shangchuan_btn {
+    margin-top: 10px;
+    font-size: 14px;
+    line-height: 21px;
+    text-align: center;
+  }
+}
+.upload_img:hover {
+  color: #2d8cf0;
+  border: 1px solid #2d8cf0;
+  .icon-shangchuan {
+    color: #2d8cf0 !important;
+  }
+}
 .news_content /deep/ img {
   max-width: 100%;
 }