Commit ba1041d5 authored by 张冬's avatar 张冬

首页样式

parent 8c3295b1
.header{ .header{
background-color: #FF5203; /* background-color: #FF5203; */
} }
.login-wrap{ .login-wrap{
background: #FF5203;; background: #FF5203;;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -227,3 +227,6 @@ img { ...@@ -227,3 +227,6 @@ img {
.el-icon-circle-close { .el-icon-circle-close {
color: white; color: white;
} }
i{
color:#AFB0B3 ;
}
\ No newline at end of file
...@@ -5,25 +5,21 @@ ...@@ -5,25 +5,21 @@
<i v-if="!collapse" class="el-icon-s-fold"></i> <i v-if="!collapse" class="el-icon-s-fold"></i>
<i v-else class="el-icon-s-unfold"></i> <i v-else class="el-icon-s-unfold"></i>
</div> </div>
<div class="logo">{{title}}</div> <div class="logo">招投标平台({{ title }})</div>
<div class="header-right"> <div class="header-right">
<div class="header-user-con"> <div class="header-user-con">
<!-- --> <!-- -->
<div class="serve">客服电话:{{phone}}</div> <div class="serve">客服电话:{{ phone }}</div>
<div class="official" @click="join">官网首页</div> <div class="official" @click="join">官网首页</div>
<!-- 全屏显示 --> <!-- 全屏显示 -->
<div class="btn-fullscreen" @click="handleFullScreen"> <div class="btn-fullscreen" @click="handleFullScreen">
<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom"> <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
<i class="el-icon-rank"></i> <i class="el-icon-rank"></i>
</el-tooltip> </el-tooltip>
</div> </div>
<!-- 消息中心 --> <!-- 消息中心 -->
<div class="btn-bell"> <div class="btn-bell">
<el-tooltip <el-tooltip effect="dark" content="有1条未读消息:消息中心" placement="bottom">
effect="dark"
content="有1条未读消息:消息中心"
placement="bottom"
>
<router-link to="/tabs"> <router-link to="/tabs">
<i class="el-icon-bell"></i> <i class="el-icon-bell"></i>
</router-link> </router-link>
...@@ -32,7 +28,7 @@ ...@@ -32,7 +28,7 @@
</div> </div>
<!-- 用户头像 --> <!-- 用户头像 -->
<div class="user-avator"> <div class="user-avator">
{{companyName}} {{ companyName }}
</div> </div>
<!-- 用户名下拉菜单 --> <!-- 用户名下拉菜单 -->
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
...@@ -48,69 +44,62 @@ ...@@ -48,69 +44,62 @@
</div> </div>
</template> </template>
<script> <script>
import {requestUrl,homeUrl} from "@utils/common.js" import { requestUrl, homeUrl } from '@utils/common.js';
import { userInfo,getMessagephone} from '@api/common/list' import { userInfo, getMessagephone } from '@api/common/list';
import bus from '../common/bus'; import bus from '../common/bus';
export default { export default {
data() { data() {
return { return {
phone:'', phone: '',
organlist: '', organlist: '',
collapse: false, collapse: false,
fullscreen: false, fullscreen: false,
message: 2, message: 2,
user: '', user: '',
organname: '', organname: '',
companyName:"", companyName: '',
title:"" title: ''
}; };
}, },
computed: { computed: {},
},
methods: { methods: {
async getUserInfo(){ async getUserInfo() {
try { try {
const { const { data, code } = await userInfo();
data, if (code == 200) {
code console.log(data);
} = await userInfo() this.companyName = data.companyName;
if(code==200){ localStorage.setItem('companyId', data.companyId);
console.log(data) let userInfo = JSON.stringify(data);
this.companyName=data.companyName; localStorage.setItem('userInfo', userInfo);
localStorage.setItem("companyId",data.companyId) let type = data.type;
let userInfo=JSON.stringify(data) if (type == 1) {
localStorage.setItem("userInfo",userInfo) this.title = '采购商';
let type=data.type; } else {
if(type==1){ this.title = '供应商';
this.title="采购商"
}else{
this.title="供应商"
} }
bus.$emit('menuList', data.menuList); bus.$emit('menuList', data.menuList);
} }
} catch (e) { } catch (e) {
console.log(e) console.log(e);
} }
}, },
join(){ join() {
window.location.href=`${homeUrl}` window.location.href = `${homeUrl}`;
// window.location.href=" http://localhost:3000/" // window.location.href=" http://localhost:3000/"
}, },
// 用户名下拉菜单选择事件 // 用户名下拉菜单选择事件
handleCommand(command) { handleCommand(command) {
localStorage.removeItem("token") localStorage.removeItem('token');
setTimeout(()=>{ setTimeout(() => {
window.location.href=`${homeUrl}` window.location.href = `${homeUrl}`;
// window.location.href=" http://localhost:3000/" // window.location.href=" http://localhost:3000/"
},1000) }, 1000);
}, },
// 侧边栏折叠 // 侧边栏折叠
collapseChage() { collapseChage() {
this.collapse = !this.collapse; this.collapse = !this.collapse;
console.log(this.collapse) console.log(this.collapse);
bus.$emit('collapse', this.collapse); bus.$emit('collapse', this.collapse);
}, },
// 全屏事件 // 全屏事件
...@@ -141,12 +130,11 @@ export default { ...@@ -141,12 +130,11 @@ export default {
this.fullscreen = !this.fullscreen; this.fullscreen = !this.fullscreen;
}, },
/* 获取客服电话 */ /* 获取客服电话 */
async getMessagephone(){ async getMessagephone() {
const {data} = await getMessagephone() const { data } = await getMessagephone();
console.log(data) console.log(data);
this.phone = data.phone this.phone = data.phone;
} }
}, },
mounted() { mounted() {
if (document.body.clientWidth < 1500) { if (document.body.clientWidth < 1500) {
...@@ -155,20 +143,18 @@ export default { ...@@ -155,20 +143,18 @@ export default {
}, },
created() { created() {
this.getUserInfo(); this.getUserInfo();
this.getMessagephone() this.getMessagephone();
} }
}; };
</script> </script>
<style scoped> <style scoped>
.serve{ .serve {
font-size: 16px; font-size: 21px;
} }
.official{ .official {
font-size: 16px; font-size: 21px;
color:#0069D9; margin: 0 30px;
margin: 0 30px }
}
.kuai { .kuai {
background: #fff; background: #fff;
width: 10px; width: 10px;
...@@ -225,6 +211,10 @@ export default { ...@@ -225,6 +211,10 @@ export default {
float: left; float: left;
width: 250px; width: 250px;
line-height: 70px; line-height: 70px;
color: #ff5203;
font-weight: bold;
font-size: 21px;
} }
.header-right { .header-right {
float: right; float: right;
...@@ -234,6 +224,7 @@ export default { ...@@ -234,6 +224,7 @@ export default {
display: flex; display: flex;
height: 70px; height: 70px;
align-items: center; align-items: center;
color: #000000;
} }
.btn-fullscreen { .btn-fullscreen {
transform: rotate(45deg); transform: rotate(45deg);
...@@ -261,7 +252,7 @@ export default { ...@@ -261,7 +252,7 @@ export default {
color: #fff; color: #fff;
} }
.btn-bell .el-icon-bell { .btn-bell .el-icon-bell {
color: #fff; color: #AFB0B3;;
} }
.user-name { .user-name {
margin-left: 10px; margin-left: 10px;
......
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
class="sidebar-el-menu" class="sidebar-el-menu"
:default-active="$route.path" :default-active="$route.path"
:collapse="collapse" :collapse="collapse"
background-color="#FF5203" background-color="#fff"
text-color="#fff" text-color="##000000"
active-text-color="rgb(51, 218, 193)" active-text-color="rgb(51, 218, 193)"
:unique-opened="true" :unique-opened="true"
router router
......
...@@ -9,10 +9,11 @@ ...@@ -9,10 +9,11 @@
<div>项目编号:{{ projectCode }}</div> <div>项目编号:{{ projectCode }}</div>
<div style="margin-right: 100px">项目名称:{{ projectName }}</div> <div style="margin-right: 100px">项目名称:{{ projectName }}</div>
</div> </div>
<div class="flex-between">
<div>项目分类:{{ classify }}</div> <div>项目分类:{{ classify }}</div>
<div class="flex-item" v-if="type == 2"> <div class="flex-item" v-if="type == 2">
<div >上传附件:</div> <div>上传附件:</div>
<ul v-if="file !== undefined && file.length > 0"> <ul v-if="file !== undefined && file.length > 0">
<li v-for="(item, i) in file" :key="i" @click="open(item.fileUrl)" class="link">{{ item.fileName }}</li> <li v-for="(item, i) in file" :key="i" @click="open(item.fileUrl)" class="link">{{ item.fileName }}</li>
</ul> </ul>
...@@ -23,7 +24,6 @@ ...@@ -23,7 +24,6 @@
<singleUpload :limit="1" tip="支持上传1个附件,不超过20M" @input="getfile"></singleUpload> <singleUpload :limit="1" tip="支持上传1个附件,不超过20M" @input="getfile"></singleUpload>
</div> </div>
</div> </div>
</div>
<div class="form"> <div class="form">
<h3><span>*</span>确定中标人</h3> <h3><span>*</span>确定中标人</h3>
<el-radio-group v-model="companyId" :disabled="type == 2 ? true : false"> <el-radio-group v-model="companyId" :disabled="type == 2 ? true : false">
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<h3 style="margin-top: 30px">说明</h3> <h3 style="margin-top: 30px">说明</h3>
<el-input <el-input
:rows="3" :rows="3"
v-model.trim="content" v-model.trim="remark"
type="textarea" type="textarea"
placeholder="请输入内容" placeholder="请输入内容"
maxlength="300" maxlength="300"
...@@ -74,7 +74,7 @@ export default { ...@@ -74,7 +74,7 @@ export default {
file: [], file: [],
companyId: '', companyId: '',
projectId: '', projectId: '',
content: '', remark: '',
navs: ['确认中标人'], navs: ['确认中标人'],
breads: ['招标管理', '招标项目管理', '工作台'], breads: ['招标管理', '招标项目管理', '工作台'],
tableData: [], tableData: [],
...@@ -91,9 +91,9 @@ export default { ...@@ -91,9 +91,9 @@ export default {
if (type == 2) { if (type == 2) {
this.navs[0] = '查看中标人'; this.navs[0] = '查看中标人';
this.get(); this.get();
}else{ } else {
this.getprojectClassify() this.getprojectClassify();
this.getcandidate() this.getcandidate();
} }
}, },
methods: { methods: {
......
<template> <template>
<div class="home"> <div class="home">
<div class="user"> <div class="user">
<div>你好 ,MaikoXie , 欢迎开始一天的工作!</div>
<ul class="user-list flex-between"> <ul class="user-list flex-between">
<li class="flex-colunm"> <li class="flex-colunm user-item">
<img src="@static/images/user.png" alt="" /> <i class="el-icon-user"></i>
<div>全部项目</div> <p>全部项目</p>
<div>{{ detail.projectCount }}</div> <div>{{ detail.projectCount }}</div>
</li> </li>
<li class="flex-colunm"> <li class="flex-colunm user-item">
<img src="@static/images/user.png" alt="" /> <i class="el-icon-user"></i>
<div>我的供应商</div> <p>我的供应商</p>
<div>{{ detail.bidderCount }}</div> <div>{{ detail.bidderCount }}</div>
</li> </li>
<li class="flex-colunm"> <li class="flex-colunm user-item">
<img src="@static/images/user.png" alt="" /> <i class="el-icon-folder-checked"></i>
<div>已定定标项目</div> <p>已定定标项目</p>
<div>{{ detail.calibrated }}</div> <div>{{ detail.calibrated }}</div>
</li> </li>
<li class="flex-colunm"> <li class="flex-colunm user-item">
<img src="@static/images/user.png" alt="" /> <i class="el-icon-folder-delete"></i>
<div>已流标项目</div> <p>已流标项目</p>
<div>{{ detail.bidFailed }}</div> <div>{{ detail.bidFailed }}</div>
</li> </li>
<li class="flex-colunm"> <li class="flex-colunm user-item">
<img src="@static/images/user.png" alt="" /> <i class="el-icon-document-delete"></i>
<div>已经终止项目</div> <p>已经终止项目</p>
<div>{{ detail.end }}</div> <div>{{ detail.end }}</div>
</li> </li>
</ul> </ul>
<h1>项目信息</h1> <h1>项目信息</h1>
<dataTable :table-data="tableData" :columns="columns" :is-pageobj="false"> <dataTable :table-data="tableData" :columns="columns" :is-pageobj="false"> </dataTable>
</dataTable>
<h1>待办事项</h1> <h1>待办事项</h1>
<ul class="flex-between project-list"> <ul class="flex-between project-list">
<li class="flex-colunm"> <li class="flex-colunm project-item">
<img src="@static/images/item.png" alt="" /> <i class="el-icon-edit"></i>
<div>待修改项目</div> <p>待修改项目</p>
<div>{{ detail.projectAduitNeedModify }}</div> <div>{{ detail.projectAduitNeedModify }}</div>
</li> </li>
<li class="flex-colunm"> <li class="flex-colunm project-item">
<img src="@static/images/item.png" alt="" /> <i class="el-icon-edit-outline"></i>
<div>待修改询价公告</div> <p>待修改询价公告</p>
<div>{{ detail.inquiryNoticeNeedModify }}</div> <div>{{ detail.inquiryNoticeNeedModify }}</div>
</li> </li>
<li class="flex-colunm"> <li class="flex-colunm project-item">
<img src="@static/images/item.png" alt="" /> <i class="el-icon-folder"></i>
<div>待修改招标公告</div> <p>待修改招标公告</p>
<div>{{ detail.biddingNoticeNeedModify }}</div> <div>{{ detail.biddingNoticeNeedModify }}</div>
</li> </li>
<li class="flex-colunm"> <li class="flex-colunm project-item">
<img src="@static/images/item.png" alt="" /> <i class="el-icon-tickets"></i>
<div>待签署应收账款买断合同</div> <p>待签署应收账款买断合同</p>
<div>{{ detail.payment }}</div> <div>{{ detail.payment }}</div>
</li> </li>
<li class="flex-colunm"> <li class="flex-colunm project-item">
<img src="@static/images/item.png" alt="" /> <i class="el-icon-document-remove"></i>
<div>待确认供应商凭证</div> <p>待确认供应商凭证</p>
<div>{{ detail.credentials }}</div> <div>{{ detail.credentials }}</div>
</li> </li>
</ul> </ul>
...@@ -160,7 +158,7 @@ export default { ...@@ -160,7 +158,7 @@ export default {
}; };
}, },
created() { created() {
getSearchString('token') getSearchString('token');
this.gethome(); this.gethome();
}, },
methods: { methods: {
...@@ -195,31 +193,42 @@ export default { ...@@ -195,31 +193,42 @@ export default {
.home > .user { .home > .user {
box-sizing: border-box; box-sizing: border-box;
padding-left: 30px; padding: 30px;
padding-top: 30px;
background: #fff; background: #fff;
} }
.user > .user-list { .user > .user-list {
margin-top: 50px; width: 100%;
margin-left: 30px; height: 180px;
background: linear-gradient(180deg, #f3b880 0%, #f66827 100%);
border-radius: 5px;
box-sizing: border-box;
padding: 0 116px;
} }
.user > ul { .user-item {
width: 80%; color: #fff;
}
.user > .user-list > li > div { font-size: 30px;
}
.user-item>i{
color: #fff;
}
.user-item > p {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px;
} }
.project-list { .project-list {
margin-left: 30px; margin-left: 30px;
} }
.project-item {
.project-list > li > div { font-size: 30px;
}
.project-item > p {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px;
} }
</style> </style>
...@@ -2,12 +2,16 @@ ...@@ -2,12 +2,16 @@
<template> <template>
<div class="home"> <div class="home">
<div class="user"> <div class="user">
<h5>你好,MaikoXie,欢迎开始一天的工作!</h5>
<ul class="user-list flex"> <ul class="user-list flex">
<li v-for="item in imglist" :key="item.id" class="flex-colunm"> <li class="flex-colunm">
<img :src="item.src" alt="" /> <i class="el-icon-user"></i>
<div class="user-pos">{{ item.info }}</div> <p class="user-pos">今日可报名项目</p>
<div>{{ item.num }}</div> <div>{{ detail.applyProjects }}</div>
</li>
<li class="flex-colunm">
<i class="el-icon-user"></i>
<p class="user-pos">中标项目</p>
<div>{{ detail.winProjects }}</div>
</li> </li>
</ul> </ul>
<h2>项目信息</h2> <h2>项目信息</h2>
...@@ -126,20 +130,6 @@ export default { ...@@ -126,20 +130,6 @@ export default {
account: 100 account: 100
} }
], ],
imglist: [
{
id: 0,
src: require('@static/images/user.png'),
info: '今日可报名项目',
num: 100
},
{
id: 1,
src: require('@static/images/user.png'),
info: '中标项目',
num: 100
}
],
//表格第一行 //表格第一行
columns: [ columns: [
{ {
...@@ -185,14 +175,14 @@ export default { ...@@ -185,14 +175,14 @@ export default {
number: 10, number: 10,
url: '' url: ''
} }
] ],
detail: ''
}; };
}, },
methods: { methods: {
async gethome() { async gethome() {
const { data, code } = await home(); const { data, code } = await home();
this.imglist[0].num=data.applyProjects this.detail = data;
this.imglist[1].num=data.winProjects
this.tabledata[0].number = data.sellingBidding; this.tabledata[0].number = data.sellingBidding;
this.tabledata[1].number = data.bidding; this.tabledata[1].number = data.bidding;
this.tabledata[2].number = data.open; this.tabledata[2].number = data.open;
...@@ -202,7 +192,7 @@ export default { ...@@ -202,7 +192,7 @@ export default {
} }
}, },
created() { created() {
getSearchString('token') getSearchString('token');
this.gethome(); this.gethome();
} }
}; };
...@@ -214,16 +204,29 @@ export default { ...@@ -214,16 +204,29 @@ export default {
} }
.home > .user { .home > .user {
box-sizing: border-box; box-sizing: border-box;
padding-left: 20px; padding: 30px;
padding-top: 20px;
background: #fff; background: #fff;
} }
.user-list { .user > .user-list {
margin-bottom: 30px; width: 100%;
margin-left: 10px; height: 180px;
background: linear-gradient(180deg, #f3b880 0%, #f66827 100%);
border-radius: 5px;
box-sizing: border-box;
padding: 0 116px;
} }
.user-list > li { .user-list > li {
margin-right: 70px; margin-right: 70px;
font-size:30px;
color:#fff
}
.user-list > li >p{
font-size: 18px;
margin-top:10px;
margin-bottom: 10px;
}
.user-list > li >i{
color:#fff
} }
h5 { h5 {
margin-top: 30px; margin-top: 30px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment