Skip to content

D
dsk-cr20g
Commit d63c1bc8 authored by danfuman's avatar danfuman
Browse files
Options

修改

parent f323b1d0
Show whitespace changes
Inline Side-by-side
Showing with 717 additions and 142 deletions
dsk-operate-ui/src/views/index.vue
View file @ d63c1bc8
...@@ -50,8 +50,18 @@ ...@@ -50,8 +50,18 @@
<span class="common-title">跟进记录</span> <span class="common-title">跟进记录</span>
</div> </div>
<div class="flex-box query-ability"> <div class="flex-box query-ability">
<div class="area">西南地区<i class="el-icon-caret-bottom"></i></div> <div class="select-popper">
<div class="month">不限<i class="el-icon-caret-bottom"></i></div> <div class="area">{{area}}<i class="sjx"></i></div>
<el-select v-model="area" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</div>
<div class="select-popper">
<div class="month">{{date}}<i class="sjx"></i></div>
<el-select v-model="date" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in dateList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</div>
</div> </div>
</div> </div>
<div class="list"> <div class="list">
...@@ -73,8 +83,18 @@ ...@@ -73,8 +83,18 @@
<span class="common-title">业绩排名</span> <span class="common-title">业绩排名</span>
</div> </div>
<div class="flex-box query-ability"> <div class="flex-box query-ability">
<div class="area">西南地区<i class="el-icon-caret-bottom"></i></div> <div class="select-popper">
<div class="month">不限<i class="el-icon-caret-bottom"></i></div> <div class="area">{{area}}<i class="sjx"></i></div>
<el-select v-model="area" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</div>
<div class="select-popper">
<div class="month">{{date}}<i class="sjx"></i></div>
<el-select v-model="date" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in dateList" :key="index" :label="item" :value="item"></el-option>
</el-select>
</div>
</div> </div>
</div> </div>
<div class="main"> <div class="main">
...@@ -103,9 +123,14 @@ ...@@ -103,9 +123,14 @@
</div> </div>
<div class="flex-box query-ability"> <div class="flex-box query-ability">
<div class="tabs"> <div class="tabs">
<div class="label" v-for="(item,index) in typeList" :class="typeIndex === index ? 'color':''" @click="handleClick(index)">{{item.name}}</div> <!--<div class="label" v-for="(item,index) in typeList" :class="typeIndex === index ? 'color':''" @click="handleClick(index)">{{item.name}}</div>-->
</div>
<div class="select-popper">
<div class="area">{{area}}<i class="sjx"></i></div>
<el-select v-model="area" class="select-multiple" placeholder="请选择">
<el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</div> </div>
<div class="area">西南地区<i class="el-icon-caret-bottom"></i></div>
</div> </div>
</div> </div>
<div> <div>
...@@ -135,24 +160,42 @@ ...@@ -135,24 +160,42 @@
<div v-if="user === 2" class="trends"> <div v-if="user === 2" class="trends">
<el-tabs v-model="activeName" @tab-click="handleClickTab"> <el-tabs v-model="activeName" @tab-click="handleClickTab">
<el-tab-pane label="甲方舆情" name="first"> <el-tab-pane label="甲方舆情" name="first">
<div class="main-box">
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(item, index) in trendsList" v-for="(item, index) in trendsList"
:key="index" :key="index"
icon="el-icon-time"> icon="el-icon-time">
{{item.main}} <div class="time">{{item.time}}<span class="company">{{item.name}}</span></div>
<div class="cont">{{item.main}}</div>
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
</div>
<!--<div class="check">全部甲方舆情 ></div>-->
</el-tab-pane>
<el-tab-pane label="监控动态" name="second">
<div class="main-box">
<el-timeline>
<el-timeline-item
v-for="(item, index) in trendsList"
:key="index"
icon="el-icon-time">
<div class="time">{{item.time}}<span class="company">{{item.name}}</span></div>
<div class="cont">{{item.main}}</div>
</el-timeline-item>
</el-timeline>
</div>
<!--<div class="check">全部监控动态 ></div>-->
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="监控动态" name="second">监控动态</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="content-right"> <div class="content-right">
<div class="user"> <div class="user" @click="handleChange">
<h3>刘毅<span>总经理</span></h3> <h3 v-if="user === 1">刘毅<span>总经理</span></h3>
<h3 v-if="user === 2">李婷婷<span>营销员</span></h3>
<p>您好，祝您工作顺利每一天</p> <p>您好，祝您工作顺利每一天</p>
</div> </div>
<div class="search"> <div class="search">
...@@ -160,8 +203,8 @@ ...@@ -160,8 +203,8 @@
<el-input placeholder="找客户/找项目/找甲方"> <el-input placeholder="找客户/找项目/找甲方">
<i slot="prefix" class="el-icon-search"></i> <i slot="prefix" class="el-icon-search"></i>
</el-input> </el-input>
<span class="common-title" style="margin-bottom: 10px;">储备项目类</span> <span class="common-title">储备项目类</span>
<div class="list"> <div class="list" style="margin-top: 8px;">
<div class="item"> <div class="item">
<img src="@/assets/images/index/cb_icon1.png"/> <img src="@/assets/images/index/cb_icon1.png"/>
<p>EPC项目</p> <p>EPC项目</p>
...@@ -190,8 +233,8 @@ ...@@ -190,8 +233,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="zbgg"> <div class="zbgg" v-if="user === 1">
<span class="common-title">招标公告</span> <span class="common-title">中标公告</span>
<div class="list"> <div class="list">
<div class="item"> <div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3> <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
...@@ -230,6 +273,41 @@ ...@@ -230,6 +273,41 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="user === 2" class="zbhxr">
<span class="common-title">竞争对手中标候选人公告</span>
<div class="list">
<div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额：4754.34</span>
</p>
</div>
<div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额：4754.34</span>
</p>
</div>
<div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额：4754.34</span>
</p>
</div>
<div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额：4754.34</span>
</p>
</div>
<div class="item">
<h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
<p>
<span>中标金额：4754.34</span>
</p>
</div>
</div>
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -238,6 +316,7 @@ ...@@ -238,6 +316,7 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import "@/assets/styles/public.css";
export default { export default {
name: "Index", name: "Index",
data() { data() {
...@@ -254,7 +333,57 @@ export default { ...@@ -254,7 +333,57 @@ export default {
], ],
typeIndex:0, typeIndex:0,
jyfxData:['1月','2月','3月','4月','5月','6月'], jyfxData:['1月','2月','3月','4月','5月','6月'],
jyfxData1:[103,256,132,186,210,95], jyfxData1:[
{
dcjxm:'103',
dcjzje:'123',
cjxmje:'153',
cjxmzs:'113',
cbxmzs:'93',
cbxmzje:'193',
},
{
dcjxm:'256',
dcjzje:'223',
cjxmje:'113',
cjxmzs:'163',
cbxmzs:'193',
cbxmzje:'123',
},
{
dcjxm:'103',
dcjzje:'123',
cjxmje:'153',
cjxmzs:'113',
cbxmzs:'93',
cbxmzje:'193',
},
{
dcjxm:'256',
dcjzje:'223',
cjxmje:'113',
cjxmzs:'163',
cbxmzs:'193',
cbxmzje:'123',
},
{
dcjxm:'103',
dcjzje:'123',
cjxmje:'153',
cjxmzs:'113',
cbxmzs:'93',
cbxmzje:'193',
},
{
dcjxm:'256',
dcjzje:'223',
cjxmje:'113',
cjxmzs:'163',
cbxmzs:'193',
cbxmzje:'123',
},
],
gjjlData:[ gjjlData:[
{ {
title:'今天拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。', title:'今天拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
...@@ -351,7 +480,53 @@ export default { ...@@ -351,7 +480,53 @@ export default {
name:'重庆轨道交通集团有限公司', name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。' main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
}, },
] {
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
},
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
},
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
},
{
time:'2018-04-03 10:20',
name:'重庆轨道交通集团有限公司',
main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
},
],
area:'西南地区',
areaList:[
{
name:'西南地区'
},
{
name:'华中地区'
},
{
name:'华南地区'
},
{
name:'华东地区'
},
{
name:'华北地区'
},
{
name:'东北地区'
},
{
name:'西北地区'
},
],
date:'不限',
dateList:['不限','今日','昨日','近三天','近七天']
}; };
}, },
created() { created() {
...@@ -370,8 +545,18 @@ export default { ...@@ -370,8 +545,18 @@ export default {
initChart() { initChart() {
let myChart = echarts.init(document.getElementById("fx-echarts")) let myChart = echarts.init(document.getElementById("fx-echarts"))
let option ={ let option ={
legend: {
x:'right',
padding:[0,120,0,0],
},
tooltip: { tooltip: {
show:false trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#FFFFFF'
}
}
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -382,14 +567,53 @@ export default { ...@@ -382,14 +567,53 @@ export default {
type: 'value', type: 'value',
}, },
grid: { grid: {
top:20, top:35,
left:30, left:30,
right:10, right:10,
bottom:20, bottom:20,
}, },
// dcjxm:'256',
// dcjzje:'223',
// cjxmje:'113',
// cjxmzs:'163',
// cbxmzs:'193',
// cbxmzje:'123',
series: [ series: [
{ {
data: this.jyfxData1, data: this.jyfxData1.map(item => item.dcjxm),
name:'待成交项目数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#0CBC6D",
},
itemStyle:{
color: "#0CBC6D",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#EFFAF6",
},
{
offset: 1,
color: "#0CBC6D",
},
]),
},
},
{
data: this.jyfxData1.map(item => item.dcjzje),
name:'待成交总金额',
type: 'line', type: 'line',
smooth: true, smooth: true,
emphasis: { emphasis: {
...@@ -398,7 +622,7 @@ export default { ...@@ -398,7 +622,7 @@ export default {
}, },
//设置折线颜色和粗细 //设置折线颜色和粗细
lineStyle: { lineStyle: {
width: 1, width: 2,
color: "#0081FF", color: "#0081FF",
}, },
itemStyle:{ itemStyle:{
...@@ -406,7 +630,8 @@ export default { ...@@ -406,7 +630,8 @@ export default {
}, },
//设置面积区域为渐变效果 //设置面积区域为渐变效果
areaStyle: { areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [ opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ {
offset: 0.2, offset: 0.2,
color: "#DFEAFF", color: "#DFEAFF",
...@@ -417,13 +642,149 @@ export default { ...@@ -417,13 +642,149 @@ export default {
}, },
]), ]),
}, },
} },
{
data: this.jyfxData1.map(item => item.cjxmje),
name:'成交项目金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#8077F2",
},
itemStyle:{
color: "#8077F2",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#ECE8FF",
},
{
offset: 1,
color: "#BCC0FF",
},
]),
},
},
{
data: this.jyfxData1.map(item => item.cjxmzs),
name:'成交项目总数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#FA6C6C",
},
itemStyle:{
color: "#FA6C6C",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FDEAE8",
},
{
offset: 1,
color: "#FDB2AE",
},
]),
},
},
{
data: this.jyfxData1.map(item => item.cbxmzs),
name:'储备项目总数',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#FA936C",
},
itemStyle:{
color: "#FA936C",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FCE8E0",
},
{
offset: 1,
color: "#FBC4AF",
},
]),
},
},
{
data: this.jyfxData1.map(item => item.cbxmzje),
name:'储备项目总金额',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#FDD85E",
},
itemStyle:{
color: "#FDD85E",
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FCF8EF",
},
{
offset: 1,
color: "#FEEBAA",
},
]),
},
},
] ]
} }
myChart.setOption(option); myChart.setOption(option);
}, },
initChart1(){ initChart1(){
var rankPic = [
require('@/assets/images/index/1.png'),
require('@/assets/images/index/2.png'),
require('@/assets/images/index/3.png'),
require('@/assets/images/index/4.png'),
require('@/assets/images/index/5.png'),
]
let myChart = echarts.init(document.getElementById("pm-echarts")) let myChart = echarts.init(document.getElementById("pm-echarts"))
let option ={ let option ={
legend: { legend: {
show: true, show: true,
...@@ -448,56 +809,63 @@ export default { ...@@ -448,56 +809,63 @@ export default {
} }
}, },
axisLabel: { axisLabel: {
color: '#232323', margin: 80,
margin: 50,
// formatter必须，配合rich使用
textStyle: { textStyle: {
align:'left', align: 'left',
},
formatter: function (value,index) {
let idx=index+1;
return '{' + idx + '|} {s|' + value + '}'
}, },
rich: { rich: {
a1: { 1: {
backgroundColor: {image: this.rankIcons[0]}, height: 24,
width: this.rankIconsSize, width: 24,
height: this.rankIconsSize, align: 'center',
align: "left", backgroundColor: {
// padding: [0, 0, 50, 100] image: rankPic[0]
},
a2: {
backgroundColor: { image: this.rankIcons[1] },
width: this.rankIconsSize,
height: this.rankIconsSize,
align: "center",
},
a3: {
backgroundColor: { image: this.rankIcons[2] },
width: this.rankIconsSize,
height: this.rankIconsSize,
align: "center",
},
a4: {
backgroundColor: { image: this.rankIcons[3] },
width: this.rankIconsSize,
height: this.rankIconsSize,
align: "center",
},
a5: {
backgroundColor: { image: this.rankIcons[4] },
width: this.rankIconsSize,
height: this.rankIconsSize,
align: "center",
},
},
formatter: (params, index) => {
return [`{a${index + 1}|} ${params}`].join('\n')
}, },
},
2: {
height: 24,
width: 24,
align: 'center',
backgroundColor: {
image: rankPic[1]
}
},
3: {
height: 24,
width: 24,
align: 'center',
backgroundColor: {
image: rankPic[2]
}
},
4: {
height: 24,
width: 24,
align: 'center',
backgroundColor: {
image: rankPic[3]
}
},
5: {
height: 24,
width: 24,
align: 'center',
backgroundColor: {
image: rankPic[4]
}
},
}
}, },
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
}, },
grid: { grid: {
left: '22%', left: '16%',
top: 20, top: 20,
right: 20, right: 20,
bottom: 60, bottom: 60,
...@@ -545,6 +913,15 @@ export default { ...@@ -545,6 +913,15 @@ export default {
}, },
handleClickTab(){ handleClickTab(){
},
handleChange(){
this.user = this.user === 1 ? 2 : 1;
if(this.user === 1){
this.$nextTick(()=>{
this.initChart()
this.initChart1()
})
}
} }
} }
}; };
...@@ -585,6 +962,7 @@ export default { ...@@ -585,6 +962,7 @@ export default {
margin-top: 14px; margin-top: 14px;
margin-bottom: 14px; margin-bottom: 14px;
border-right: 1px solid #EFEFEF; border-right: 1px solid #EFEFEF;
cursor: pointer;
.left{ .left{
width: 48px; width: 48px;
height: 48px; height: 48px;
...@@ -625,6 +1003,16 @@ export default { ...@@ -625,6 +1003,16 @@ export default {
.item:last-child{ .item:last-child{
border-right: 0; border-right: 0;
} }
.item:hover{
.right{
.title{
color: #0081FF;
}
.number{
color: #0081FF;
}
}
}
.add{ .add{
padding-left: 0; padding-left: 0;
.yd{ .yd{
...@@ -654,11 +1042,17 @@ export default { ...@@ -654,11 +1042,17 @@ export default {
margin-right: 4px; margin-right: 4px;
} }
} }
.btn:hover{
background: #F6F9FC;
}
} }
} }
.content-wrap{ .content-wrap{
margin-bottom: 12px; margin-bottom: 12px;
height: 460px; height: 460px;
.select-popper{
margin-right:0;
}
.record{ .record{
height: 460px; height: 460px;
background: #FFFFFF; background: #FFFFFF;
...@@ -749,12 +1143,19 @@ export default { ...@@ -749,12 +1143,19 @@ export default {
} }
} }
.select-popper{
.area{ .area{
font-size: 14px; font-size: 14px;
color: #232323; color: #232323;
cursor: pointer; cursor: pointer;
i{ i{
color:#A7A7A7; background: url("../assets/images/index/sjx.png");
background-size: 100% 100%;
width: 10px;
height: 6px;
display: inline-block;
margin-bottom: 2px;
margin-left: 4px;
} }
} }
.month{ .month{
...@@ -763,10 +1164,34 @@ export default { ...@@ -763,10 +1164,34 @@ export default {
margin-left: 16px; margin-left: 16px;
cursor: pointer; cursor: pointer;
i{ i{
color:#A7A7A7; background: url("../assets/images/index/sjx.png");
background-size: 100% 100%;
width: 10px;
height: 6px;
display: inline-block;
margin-bottom: 2px;
margin-left: 4px;
}
}
.color{
color: #0081FF;
i{
background: url("../assets/images/index/sjx2.png");
background-size: 100% 100%;
} }
} }
} }
.select-popper:hover{
.area,.month{
color: #0081FF;
i{
background: url("../assets/images/index/sjx1.png");
background-size: 100% 100%;
}
}
}
}
.content-db{ .content-db{
height: 263px; height: 263px;
background: #FFFFFF; background: #FFFFFF;
...@@ -830,6 +1255,7 @@ export default { ...@@ -830,6 +1255,7 @@ export default {
background: #FFFFFF; background: #FFFFFF;
border-radius: 4px; border-radius: 4px;
padding: 16px; padding: 16px;
position: relative;
.tabs{ .tabs{
.label{ .label{
display: inline-block; display: inline-block;
...@@ -855,13 +1281,34 @@ export default { ...@@ -855,13 +1281,34 @@ export default {
color: #FFFFFF; color: #FFFFFF;
} }
} }
.select-popper{
position: absolute;
right: 0;
top: 27px;
z-index: 99;
.area{ .area{
font-size: 14px; font-size: 14px;
color: #232323; color: #232323;
margin-left: 16px; margin-left: 16px;
cursor: pointer; cursor: pointer;
i{ i{
color:#A7A7A7; background: url("../assets/images/index/sjx.png");
background-size: 100% 100%;
width: 10px;
height: 6px;
display: inline-block;
margin-bottom: 2px;
margin-left: 4px;
}
}
}
.select-popper:hover{
.area,.month{
color: #0081FF;
i{
background: url("../assets/images/index/sjx1.png");
background-size: 100% 100%;
}
} }
} }
} }
...@@ -870,6 +1317,66 @@ export default { ...@@ -870,6 +1317,66 @@ export default {
border-radius: 4px; border-radius: 4px;
padding: 16px; padding: 16px;
height: 440px; height: 440px;
overflow: hidden;
position: relative;
::v-deep .el-tabs__header{
margin: 0 0 18px;
}
::v-deep .el-tabs__content{
overflow-y: auto;
height: 368px;
}
::v-deep .el-timeline{
.el-timeline-item{
padding-bottom: 18px;
}
.el-timeline-item__tail{
left: 7px;
border-left: 2px dotted rgba(0,129,255,0.5);
}
.el-timeline-item__node{
background-color:#ffffff;
.el-timeline-item__icon{
color:#0081FF;
font-size: 14px;
}
}
.el-timeline-item__node--normal{
left: 0px;
width: 16px;
height: 16px;
}
}
.time{
font-size: 14px;
color: rgba(35,35,35,0.8);
.company{
color: #0081FF;
margin-left: 16px;
}
}
.cont{
background: #F6F9FD;
border-radius: 6px;
padding: 16px;
margin-top: 8px;
font-size: 14px;
color: rgba(35,35,35,0.8);
margin-right: 16px;
}
.check{
height: 60px;
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 17%, rgba(255,255,255,0.6) 100%);
font-size: 16px;
color: #0CBC6D;
line-height: 60px;
text-align: center;
width: 100%;
position: absolute;
bottom: 46px;
cursor: pointer;
}
} }
} }
.content-right{ .content-right{
...@@ -915,8 +1422,8 @@ export default { ...@@ -915,8 +1422,8 @@ export default {
::v-deep .el-input{ ::v-deep .el-input{
height: 32px; height: 32px;
border-radius: 2px; border-radius: 2px;
margin-bottom: 22px; margin-bottom: 20px;
margin-top: 16px; margin-top: 14px;
.el-input__inner{ .el-input__inner{
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
...@@ -936,8 +1443,10 @@ export default { ...@@ -936,8 +1443,10 @@ export default {
justify-content: space-between; justify-content: space-between;
.item{ .item{
margin: 0 auto; margin: 0 auto;
width: 33.3%;
height: 94px; height: 94px;
text-align: center; text-align: center;
cursor: pointer;
img{ img{
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -948,6 +1457,9 @@ export default { ...@@ -948,6 +1457,9 @@ export default {
font-size: 12px; font-size: 12px;
} }
} }
.item:hover{
background: #F6F9FC;
}
} }
} }
.zbgg{ .zbgg{
...@@ -986,6 +1498,42 @@ export default { ...@@ -986,6 +1498,42 @@ export default {
border-bottom: 0; border-bottom: 0;
} }
} }
.zbhxr{
height: 382px;
background: #FFFFFF;
border-radius: 4px;
padding: 16px;
.list{
margin-top: 16px;
}
.item{
border-bottom: 1px solid #EEEEEE;
padding: 10px 0;
h3{
font-weight: 400;
color: rgba(35,35,35,0.8);
font-size: 14px;
padding-bottom: 8px;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p{
color: rgba(35,35,35,0.4);
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
span{
margin-right: 15px;
}
}
}
.item:last-child{
border-bottom: 0;
}
}
} }
} }
</style> </style>
......
dsk-operate-ui/src/views/login.vue
View file @ d63c1bc8
<template> <template>
<div class="login"> <div class="login">
<div class="content">
<div class="left">
<img class="logo" src="../assets/images/logo1.png" />
<img class="img" src="../assets/images/login/img.png" />
</div>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title"><img src="../assets/images/title_icon.png"/>欢迎登录系统</h3> <h3 class="title"><img src="../assets/images/title_icon.png"/>欢迎登录系统</h3>
<el-form-item prop="username"> <el-form-item prop="username">
...@@ -55,6 +60,7 @@ ...@@ -55,6 +60,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -153,12 +159,31 @@ export default { ...@@ -153,12 +159,31 @@ export default {
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.login { .login {
display: flex; /*display: flex;*/
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../assets/images/login_bg.png"); background-image: url("../assets/images/login_bg.png");
background-size: cover; background-size: cover;
.content{
width: 1320px;
margin: 0 auto;
padding-top: 200px;
}
.left{
float: left;
width: 730px;
margin-right: 170px;
}
.logo{
width: 317px;
height: 69px;
margin-bottom: 58px;
}
.img{
width: 730px;
height: 624px;
}
} }
.title { .title {
padding: 46px 0 32px 48px; padding: 46px 0 32px 48px;
...@@ -177,6 +202,8 @@ export default { ...@@ -177,6 +202,8 @@ export default {
border-radius: 6px; border-radius: 6px;
background: #ffffff; background: #ffffff;
width: 420px; width: 420px;
float: right;
margin-top: 70px;
/*padding: 25px 25px 5px 25px;*/ /*padding: 25px 25px 5px 25px;*/
.el-form-item{ .el-form-item{
padding: 0 48px; padding: 0 48px;
......
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