活动详情ui优化

src/views/activityInformation/details.vue

@@ -21,8 +21,8 @@
             type="primary"
             :disabled="registrationButton"
             @click="handleAdd"
-          >我要报名</el-button>
-          <el-image v-if="image" style="width: 100px;height: 80px" :src="registration" />
+          ><span class="top-button-title">我要报名</span></el-button>
+          <el-image v-if="image" style="width: 62px;height: 62px" :src="registration" />
         </div>
         <el-form ref="form" :model="form" label-width="auto" class="form">
           <el-row>
@@ -67,7 +67,7 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item :label="form.registrationWay === '1' ? '报名人数:' : '限制人数:'">
+              <el-form-item :label="form.registrationWay === '1' ? '报名人数：' : '限制人数：'">
                 <span class="formdate-text">{{ registrationNumber }}</span>
               </el-form-item>
             </el-col>
@@ -97,7 +97,7 @@
     <el-dialog :close-on-click-modal="false" class="signupDialog" title="我要报名" :visible.sync="open" width="40%" append-to-body>
       <el-form ref="addForm" :rules="rules" :model="addForm" label-width="auto">
         <el-form-item label="参与企业" prop="signUpDept">
-          <el-select v-model="addForm.signUpDept" style="width: 100%" placeholder="请输入参与企业">
+          <el-select size="medium" v-model="addForm.signUpDept" class="input" placeholder="请输入参与企业">
             <el-option
               v-for="item in enterprises"
               :key="item.id"
@@ -107,18 +107,18 @@
           </el-select>
         </el-form-item>
         <el-form-item label="联系人" prop="contact">
-          <el-input v-model.trim="addForm.contact" maxlength="30" placeholder="请输入联系人" />
+          <el-input size="medium" class="input"   v-model.trim="addForm.contact" maxlength="30" placeholder="请输入联系人" />
         </el-form-item>
         <el-form-item label="联系电话" prop="phone">
-          <el-input v-model.trim="addForm.phone" maxlength="16" placeholder="请输入联系电话" />
+          <el-input size="medium" class="input"    v-model.trim="addForm.phone" maxlength="16" placeholder="请输入联系电话" />
         </el-form-item>
         <el-form-item label="参与人数" prop="peopleNumber">
-          <el-input v-model.trim="addForm.peopleNumber" maxlength="10" oninput="value=value.replace(/\D/g,'')" placeholder="请输入参与人数" />
+          <el-input size="medium" class="input"   v-model.trim="addForm.peopleNumber" maxlength="10" oninput="value=value.replace(/\D/g,'')" placeholder="请输入参与人数" />
         </el-form-item>
       </el-form>
       <div class="footer">
-        <el-button @click="open=false">关闭</el-button>
-        <el-button type="primary" @click="add">确定</el-button>
+        <el-button class="cancelBtn" @click="open=false">关闭</el-button>
+        <el-button class="confirmBtn" type="primary" @click="add">确定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -148,7 +148,7 @@ export default {
       // 我要报名按钮
       registrationButton: false,
       // 已报名图片
-      registration: require('@/assets/image/registrationStatus.png'),
+      registration: require('@/assets/image/yibaoming.png'),
       // 活动总限制人数
       peopleTotal: 0,
       // 活动目前人数
@@ -505,6 +505,8 @@ export default {
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
         color: #707070;
         -webkit-background-clip: text;
+        max-width: 1203px;
+        text-overflow:ellipsis;
       }
       .item.el-form-item__label{
         color: #333333;
@@ -523,7 +525,7 @@ export default {
       }
     }
     .form{
-      margin-top: 40px;
+      margin-top: 15px;
     }
     .details-body{
       margin-top: 12px;
@@ -553,6 +555,7 @@ export default {
   }
 }
 .signupDialog{
+  padding: 0px 67px;
   .footer{
     padding: 20px 10px 0 0;
     float: right;
@@ -565,4 +568,23 @@ export default {
   color: #333333;
   -webkit-background-clip: text;
 }
+.top-button-title{
+  font-size: 15px;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #FFFFFF;
+  -webkit-background-clip: text;
+}
+::v-deep.el-row{
+  margin-bottom: 4px;
+}
+.input{
+  width: 362px;
+  height: 36px;
+  line-height: 32px;
+  background: #FFFFFF;
+  border-radius: 6px 6px 6px 6px;
+  opacity: 1;
+  border: 1px solid #E4E4E4;
+}
 </style>

src/views/personalCenter/components/messageCenter.vue

@@ -161,7 +161,6 @@ export default {
 
 <style scoped lang="scss">
 .messageCenter-module{
-  width: 1126px;
   //margin: auto;
   .info-top{
     display: flex;
@@ -189,7 +188,7 @@ export default {
         font-size: 15px;
         color: #333333;
         font-weight: bold;
-        padding: 0 30px;
+        margin-left: 60px;
         cursor: pointer;
         display: block;
         float: left;
@@ -230,7 +229,7 @@ export default {
     border-color: #F18F18
   }
   .table{
-    width: 100%;
+    width: 1066px;
     margin-bottom: 28px;
   }
 }

src/views/personalCenter/components/myDeclaration.vue

@@ -88,7 +88,6 @@ export default {
 </script>
 <style scoped lang="scss">
 .myDeclaration-module{
-  width: 1126px;
   //margin: auto;
   .el-divider--horizontal{
     background-color: black!important;
@@ -109,6 +108,7 @@ export default {
   }
   .body{
     padding-top: 30px;
+    padding-right:30px;
     ::v-deep.el-table th{
      background-color: white!important;
     }

src/views/personalCenter/index.vue

 <template>
   <div class="personalCenter-module">
     <div class="topHeader">
-      <HomeSearch/>
-      <nav-list :list="navList" :current-menu="'/personalCenter/index'"/>
+      <HomeSearch />
+      <nav-list :list="navList" :current-menu="'/personalCenter/index'" />
     </div>
     <div class="personalCenter-content">
       <div class="body">
         <el-row :gutter="20">
           <el-col :span="1">
-            <i class="el-icon-arrow-left" style="color: #1A78E5;font-weight: bold;padding-top: 40px"
-               @click="handleGoBack"/>
+            <i
+              class="el-icon-arrow-left"
+              style="color: #1A78E5;font-weight: bold;padding-top: 40px"
+              @click="handleGoBack"
+            />
             <!--            <el-button type="primary" icon="el-icon-arrow-left" circle @click="handleGoBack" />-->
           </el-col>
           <el-col :span="5">
@@ -40,25 +43,25 @@
           <el-col :span="18">
             <div class="right-region">
               <div v-if="choseMenu === '个人信息'">
-                <personal-info/>
+                <personal-info />
               </div>
               <div v-if="choseMenu === '关联企业'">
-                <AffiliatedEnterprises/>
+                <AffiliatedEnterprises />
               </div>
               <div v-if="choseMenu === '我的收藏'">
-                <my-collection/>
+                <my-collection />
               </div>
               <div v-if="choseMenu === '我的申报'">
-                <my-declaration/>
+                <my-declaration />
               </div>
               <div v-if="choseMenu === '我的活动'">
-                <my-activities/>
+                <my-activities />
               </div>
               <div v-if="choseMenu === '修改密码'">
-                <change-password @changeRouter="changeRouter"/>
+                <change-password @changeRouter="changeRouter" />
               </div>
               <div v-if="choseMenu === '消息中心'">
-                <message-center/>
+                <message-center />
               </div>
             </div>
           </el-col>
@@ -78,8 +81,8 @@ import myDeclaration from './components/myDeclaration'
 import personalInfo from './components/personalInfo'
 import HomeSearch from '@/views/homePage/components/searchHome/index'
 import NavList from '@/views/homePage/components/NavList/index'
-import {myMessage} from '@/views/personalCenter/apis'
-import {idGetImg} from '@/views/OneClickService/apis'
+import { myMessage } from '@/views/personalCenter/apis'
+import { idGetImg } from '@/views/OneClickService/apis'
 import Cookies from 'js-cookie'
 import headImg from '../../assets/image/touxiang.png'
 
@@ -101,13 +104,13 @@ export default {
       loading: true, // 头像遮罩
       choseMenu: '个人信息', // 选择的模块
       options: [
-        {name: '个人信息'},
-        {name: '关联企业'},
-        {name: '我的收藏'},
-        {name: '我的申报'},
-        {name: '我的活动'},
-        {name: '修改密码'},
-        {name: '消息中心'}
+        { name: '个人信息' },
+        { name: '关联企业' },
+        { name: '我的收藏' },
+        { name: '我的申报' },
+        { name: '我的活动' },
+        { name: '修改密码' },
+        { name: '消息中心' }
       ],
       form: {
         // img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
@@ -115,25 +118,25 @@ export default {
         nickName: ''
       },
       personalCenterList: [
-        {img: require('@/assets/image/gongju-pic1.jpg'), name: '石家庄政务服务'},
-        {img: require('@/assets/image/gongju-pic2.jpg'), name: '石家庄政务服务'},
-        {img: require('@/assets/image/gongju-pic3.jpg'), name: '石家庄政务服务'},
-        {img: require('@/assets/image/gongju-pic4.jpg'), name: '石家庄政务服务'},
-        {img: require('@/assets/image/gongju-pic5.jpg'), name: '石家庄政务服务'},
-        {img: require('@/assets/image/gongju-pic6.jpg'), name: '石家庄政务服务'}
+        { img: require('@/assets/image/gongju-pic1.jpg'), name: '石家庄政务服务' },
+        { img: require('@/assets/image/gongju-pic2.jpg'), name: '石家庄政务服务' },
+        { img: require('@/assets/image/gongju-pic3.jpg'), name: '石家庄政务服务' },
+        { img: require('@/assets/image/gongju-pic4.jpg'), name: '石家庄政务服务' },
+        { img: require('@/assets/image/gongju-pic5.jpg'), name: '石家庄政务服务' },
+        { img: require('@/assets/image/gongju-pic6.jpg'), name: '石家庄政务服务' }
       ]
     }
   },
   computed: {
     navList() {
       const navArray = [
-        {menuName: '首页', path: '/', query: {}},
-        {menuName: '政策直达', path: '/PolicyDirect/index', query: {}},
-        {menuName: '服务共享', path: '/ServiceShare/index'},
-        {menuName: '企业诉求', path: '/EnterpriseAppeal/index', query: {}},
-        {menuName: '一键办事', path: '/OneClickService/index', query: {}},
-        {menuName: '活动信息', path: '/activityInformation/index', query: {}},
-        {menuName: '个人中心', path: '/personalCenter/index', query: {}}
+        { menuName: '首页', path: '/', query: {}},
+        { menuName: '政策直达', path: '/PolicyDirect/index', query: {}},
+        { menuName: '服务共享', path: '/ServiceShare/index' },
+        { menuName: '企业诉求', path: '/EnterpriseAppeal/index', query: {}},
+        { menuName: '一键办事', path: '/OneClickService/index', query: {}},
+        { menuName: '活动信息', path: '/activityInformation/index', query: {}},
+        { menuName: '个人中心', path: '/personalCenter/index', query: {}}
       ]
       return navArray
     }

src/views/personalCenter/messageDetails.vue

@@ -7,17 +7,19 @@
       <el-row>
         <el-col :span="1">
           <!--<el-button class="back-button" type="primary" icon="el-icon-arrow-left" circle @click="handleGoBack" />-->
-          <i class="el-icon-arrow-left" style="color: #1A78E5;font-weight: bold;padding-top: 40px" @click="handleGoBack" />
+          <i class="el-icon-arrow-left"  @click="handleGoBack" />
         </el-col>
         <el-col :span="23">
-          <div style="background-color: #ffffff;padding: 50px 30px 20px 30px;min-height: 500px">
+          <div style="background-color: #ffffff;padding: 29px 30px 20px 30px;min-height: 500px">
             <div class="info-top">
               <div class="title">消息详情</div>
-              <el-button type="text" class="updataBtn" @click="handleDel">删除</el-button>
+              <el-button type="text" class="updataBtn" @click="handleDel">
+                <i class="el-icon-delete-solid" />
+                删除</el-button>
             </div>
 <!--            <el-divider />-->
             <div class="body">
-              <div class="title">{{ form.title }}</div>
+              <div class="form-title">{{ form.title }}</div>
               <div class="value">{{ form.content }}</div>
               <div class="time">{{ form.createTime }}</div>
             </div>
@@ -106,7 +108,8 @@ export default {
     width: 100%;
   }
   .messageDetails-content{
-    padding: 310px 120px 40px;
+    width: 1400px;
+    padding: 312px 120px 34px;
     //margin-top: 30px;
     .back-button {
       margin-top: 30px;
@@ -120,13 +123,18 @@ export default {
       .title{
         font-weight: bold;
         font-size: 17px;
+        color: #333333;
       }
       .updataBtn{
-
+        font-size: 15px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #1A78E5;
+        -webkit-background-clip: text;
       }
     }
     .body{
-      padding-top: 40px;
+      padding-top: 34px;
       .title{
         text-align: center;
         font-weight: bold;
@@ -134,13 +142,41 @@ export default {
         padding-bottom: 35px;
       }
       .value{
-        text-indent: 2em;
+        font-size: 15px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #333333;
+        line-height: 25px;
+        -webkit-background-clip: text;
       }
       .time{
         padding-top: 30px;
         float: right;
+        font-size: 15px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #333333;
+        line-height: 24px;
+        -webkit-background-clip: text;
+      }
+      .form-title{
+        text-align: center;
+        font-size: 19px;
+        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+        font-weight: bold;
+        color: #333333;
+        -webkit-background-clip: text;
+        line-height: 24px;
+        padding-bottom: 36px;
       }
     }
   }
+  .el-icon-arrow-left{
+    color: #1A78E5;
+    font-weight: bold;
+    padding-top: 41px;
+    float: right;
+    margin-right: 20px;
+  }
 }
 </style>