首页样式优化

src/api/ali-oss.js

 // 引入ali-oss
-let OSS = require('ali-oss')
+let OSS = require('ali-oss');
 
 /**
  *  [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。
@@ -8,14 +8,12 @@ let OSS = require('ali-oss')
  *  [region] {String}：bucket所在的区域， 默认oss-cn-hangzhou。
  */
 let client = new OSS({
-  region: 'oss-cn-beijing',
-  //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
-  accessKeyId: 'LTAI4GG1zbSAQrjAvWL8bJKX',
-  accessKeySecret: '06yXwRMA5ppeTb0hI29lG3jQqwr4A8',
-  bucket: 'hsz1997'
-})
-
   
+    bucket: 'jieancai',
+    accesskeyId: 'LTAI4FyVepQBtS7P6waqWbjC',
+    accesskeySecret: 'Fu97bC8ygDnsef8dhXlU4ZEaB2gNDM',
+    region: 'oss-cn-beijing.aliyuncs.com'
+});
 
 /**
  *  上传文件，大小不能超过5GB
@@ -24,30 +22,29 @@ let client = new OSS({
  *
  * @retruns Promise
  */
-export const put = async(ObjName, fileUrl) => {
+export const put = async (ObjName, fileUrl) => {
     try {
-    let result = await client.put(`/img/${ObjName}`, fileUrl)
+        let result = await client.put(`/img/${ObjName}`, fileUrl);
         // AAA为文件夹， ObjName为文件名字,可以只写名字，就直接储存在 bucket 的根路径
-    return result
+        return result;
     } catch (e) {
-    console.log(e)
+        console.log(e);
     }
-}
-
+};
 
 export const getFileNameUUID = () => {
     function rx() {
-    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     }
-  return `${+new Date()}_${rx()}${rx()}`
-}
-
+    return `${+new Date()}_${rx()}${rx()}`;
+};
 
-export function client1(data) {//data后端提供数据
+export function client1(data) {
+    //data后端提供数据
     return new OSS({
         region: data.region,
         accessKeyId: data.accessKeyId,
         accessKeySecret: data.accessKeySecret,
         bucket: data.bucket
-  })
+    });
 }

src/common/common.css

@@ -19,7 +19,6 @@ a {
 }
 .link :hover {
     color: rgb(51, 218, 193) !important;
-  
 }
 
 a:hover {
@@ -229,6 +228,11 @@ img {
 .el-icon-circle-close {
     color: white;
 }
-i{
-    color:#AFB0B3 ;
+i {
+    color: #afb0b3;
+}
+.over {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }

src/components/common/Header.vue

@@ -18,14 +18,14 @@
                     </el-tooltip>
                 </div>
                 <!-- 消息中心 -->
-                <div class="btn-bell">
+                <!-- <div class="btn-bell">
                     <el-tooltip effect="dark" content="有1条未读消息:消息中心" placement="bottom">
                         <router-link to="/tabs">
                             <i class="el-icon-bell"></i>
                         </router-link>
                     </el-tooltip>
                     <span class="btn-bell-badge" v-if="message"></span>
-                </div>
+                </div> -->
                 <!-- 用户头像 -->
                 <div class="user-avator">
                     {{ companyName }}

src/pages/purchaser/home/home.vue

@@ -29,33 +29,46 @@
                 </li>
             </ul>
             <h1>项目信息</h1>
-            <dataTable :table-data="tableData" :columns="columns" :is-pageobj="false"> </dataTable>
+            <ul class="flex project-list">
+                <li class="flex-center project-item" v-for="(item, index) in tableData" :key="index">
+                    <div class="flex-colunm">
+                        <div >{{ item.number }}</div>
+                        <p class="over">{{ item.state }}</p>
+                    </div>
+                </li>
+            </ul>
+            <!-- <dataTable :table-data="tableData" :columns="columns" :is-pageobj="false"> </dataTable> -->
             <h1>待办事项</h1>
-            <ul class="flex-between project-list">
-                <li class="flex-colunm project-item">
-                    <i class="el-icon-edit"></i>
-                    <p>待修改项目</p>
-                    <div>{{ detail.projectAduitNeedModify }}</div>
+            <ul class="flex project-list">
+                <li class="flex-center project-item">
+                    <div class="flex-colunm">
+                        <div >{{ detail.projectAduitNeedModify }}</div>
+                        <p class="overflow">待修改项目</p>
+                    </div>
                 </li>
-                <li class="flex-colunm project-item">
-                    <i class="el-icon-edit-outline"></i>
-                    <p>待修改询价公告</p>
+                <li class="flex-center project-item">
+                    <div class="flex-colunm">
                         <div>{{ detail.inquiryNoticeNeedModify }}</div>
+                        <p class="flex-colunm">待修改询价公告</p>
+                    </div>
                 </li>
-                <li class="flex-colunm project-item">
-                    <i class="el-icon-folder"></i>
-                    <p>待修改招标公告</p>
-                    <div>{{ detail.biddingNoticeNeedModify }}</div>
+                <li class="flex-center project-item">
+                    <div class="flex-colunm">
+                        <div >{{ detail.biddingNoticeNeedModify }}</div>
+                        <p class="overflow">待修改招标公告</p>
+                    </div>
                 </li>
-                <li class="flex-colunm project-item">
-                    <i class="el-icon-tickets"></i>
-                    <p>待签署应收账款买断合同</p>
-                    <div>{{ detail.payment }}</div>
+                <li class="flex-center project-item">
+                    <div class="flex-colunm">
+                        <div >{{ detail.payment }}</div>
+                        <p class="overflow">待签署应收账款合同</p>
+                    </div>
                 </li>
-                <li class="flex-colunm project-item">
-                    <i class="el-icon-document-remove"></i>
-                    <p>待确认供应商凭证</p>
-                    <div>{{ detail.credentials }}</div>
+                <li class="flex-center project-item">
+                    <div class="flex-colunm">
+                        <div >{{ detail.credentials }}</div>
+                        <p class="over">待确认供应商凭证</p>
+                    </div>
                 </li>
             </ul>
         </div>
@@ -103,7 +116,7 @@ export default {
                     state: '处于评标阶段的项目',
                     number: '10',
                     url: ''
-                },
+                }
                 // {
                 //     state: '处于定标阶段的项目',
                 //     number: '10',
@@ -180,13 +193,21 @@ export default {
 </script>
 
 <style scoped>
+.over{
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
 .user > h1 {
     font-weight: bold;
-    margin-top: 50px;
-    margin-bottom: 30px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 18px;
+    padding-left: 20px;
+    border-left: 4px solid #ff5203;
 }
 
-.home {
+/* .home {
     box-sizing: border-box;
     padding: 30px;
 }
@@ -195,7 +216,7 @@ export default {
     box-sizing: border-box;
     padding: 30px;
     background: #fff;
-}
+} */
 
 .user > .user-list {
     width: 100%;
@@ -211,7 +232,7 @@ export default {
 
     font-size: 30px;
 }
-.user-item>i{
+.user-item > i {
     color: #fff;
 }
 .user-item > p {
@@ -221,14 +242,28 @@ export default {
 }
 
 .project-list {
-    margin-left: 30px;
+    flex-wrap: wrap;
 }
 .project-item {
-    font-size: 30px;
+    font-size: 26px;
+    width: 175px;
+    height: 144px;
+    background: #ffffff;
+    border-radius: 5px;
+    box-sizing: border-box;
+    padding: 20px 0;
+}
+.project-item > div {
+    width: 100%;
+    border-right: 1px solid #dbdcdd;
 }
-.project-item > p {
+.project-list > .project-item:last-child > div {
+    border-right: none;
+}
+.project-item p {
     margin-top: 10px;
     margin-bottom: 10px;
-    font-size: 18px;
+    font-size: 16px;
+    text-align: center;
 }
 </style>