Skip to content

肖康 / cloudSystem

Go to a project
Commit 4c2fbf80 by liangjianmin
Options

css

parent 98e120e1
Inline Side-by-side
Showing with 600 additions and 7 deletions
package.json
......@@ -10,6 +10,7 @@
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"echarts": "^5.1.1",
"element-ui": "^2.15.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
......
src/assets/css/index/index.less
.home-index {
width: 99.8%;
width: 99%;
padding-left: 20px;
padding-bottom: 20px;
.survey-top {
padding-top: 20px;
......@@ -204,12 +205,246 @@
color: #333333;
font-weight: 500;
}
.tab{
.tab {
width: 160px;
height: 28px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #BEC9DF;
text-align: center;
li {
font-size: 12px;
color: #646b78;
text-align: center;
height: 21px;
border-right: 1px solid #BEC9DF;
padding: 0 5px;
cursor: pointer;
&.curr {
color: #1969f9;
}
&:last-child {
border-right: none;
}
}
}
}
.status {
margin-top: 60px;
height: 18px;
background: #DFE5F1;
border-radius: 9px;
li {
position: relative;
span {
position: absolute;
right: 6px;
top: -45px;
font-size: 22px;
color: #333333;
font-weight: bold;
}
&.color1 {
background: #4DD35B;
border-radius: 9px 0 0 9px;
}
&.color2 {
background: #FF9D4D;
}
&.color3 {
background: #629AFF;
}
}
}
}
.offer {
margin-top: 25px;
height: 300px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E5EBF6;
padding: 16px 0 0 14px;
.box {
flex: 0 0 50%;
.head {
padding-right: 100px;
.t1 {
font-size: 16px;
color: #333333;
}
.tab {
width: 160px;
height: 28px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #BEC9DF;
text-align: center;
li {
font-size: 12px;
color: #646b78;
text-align: center;
height: 21px;
border-right: 1px solid #BEC9DF;
padding: 0 5px;
cursor: pointer;
&.curr {
color: #1969f9;
}
&:last-child {
border-right: none;
}
}
}
}
.list {
width: 100%;
tr {
th {
height: 44px;
background: #F1F4FA;
border-radius: 2px 2px 0px 0px;
font-size: 14px;
color: #333333;
font-weight: normal;
}
td {
height: 44px;
background: #FFFFFF;
font-size: 12px;
color: #333333;
}
}
}
}
}
.inquiry {
height: 300px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E5EBF6;
margin-top: 30px;
.head {
margin-left: 20px;
border-bottom: 1px solid #E5EBF6;
.tab {
li {
position: relative;
padding: 0 8px;
height: 42px;
background: #F1F4FA;
border-radius: 2px 2px 0px 0px;
border-right: 1px solid #E5EBF6;
border-left: 1px solid #E5EBF6;
font-size: 14px;
color: #646b78;
cursor: pointer;
&:first-child {
border-left: none;
border-right: none;
}
&.curr {
background: #FFFFFF;
color: #333333;
font-size: 16px;
&:after {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #FFFFFF;
content: '';
bottom: -1px;
}
}
}
}
.params-wrap {
.tabs {
width: 160px;
height: 28px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #BEC9DF;
text-align: center;
li {
font-size: 12px;
color: #646b78;
text-align: center;
height: 21px;
border-right: 1px solid #BEC9DF;
padding: 0 5px;
cursor: pointer;
&.curr {
color: #1969f9;
}
&:last-child {
border-right: none;
}
}
}
}
}
.wrap {
margin-top: 20px;
width: 100%;
.box1 {
width: 80%;
}
.box2 {
width: 20%;
.t1 {
font-size: 12px;
color: #646b78;
margin-bottom: 6px;
}
.inp {
width: 248px;
height: 32px;
border-radius: 2px;
border: 1px solid #BEC9DF;
text-indent: 10px;
font-size: 12px;
&::-webkit-input-placeholder {
color: #a1acc1;
}
}
}
}
}
......
src/assets/css/index/index.min.css
.home-index {
width: 99.8%;
width: 99%;
padding-left: 20px;
padding-bottom: 20px;
}
.home-index .survey-top {
padding-top: 20px;
......@@ -183,5 +184,196 @@
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #BEC9DF;
text-align: center;
}
.home-index .rate-box .top .tab li {
font-size: 12px;
color: #646b78;
text-align: center;
height: 21px;
border-right: 1px solid #BEC9DF;
padding: 0 5px;
cursor: pointer;
}
.home-index .rate-box .top .tab li.curr {
color: #1969f9;
}
.home-index .rate-box .top .tab li:last-child {
border-right: none;
}
.home-index .rate-box .status {
margin-top: 60px;
height: 18px;
background: #DFE5F1;
border-radius: 9px;
}
.home-index .rate-box .status li {
position: relative;
}
.home-index .rate-box .status li span {
position: absolute;
right: 6px;
top: -45px;
font-size: 22px;
color: #333333;
font-weight: bold;
}
.home-index .rate-box .status li.color1 {
background: #4DD35B;
border-radius: 9px 0 0 9px;
}
.home-index .rate-box .status li.color2 {
background: #FF9D4D;
}
.home-index .rate-box .status li.color3 {
background: #629AFF;
}
.home-index .offer {
margin-top: 25px;
height: 300px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E5EBF6;
padding: 16px 0 0 14px;
}
.home-index .offer .box {
flex: 0 0 50%;
}
.home-index .offer .box .head {
padding-right: 100px;
}
.home-index .offer .box .head .t1 {
font-size: 16px;
color: #333333;
}
.home-index .offer .box .head .tab {
width: 160px;
height: 28px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #BEC9DF;
text-align: center;
}
.home-index .offer .box .head .tab li {
font-size: 12px;
color: #646b78;
text-align: center;
height: 21px;
border-right: 1px solid #BEC9DF;
padding: 0 5px;
cursor: pointer;
}
.home-index .offer .box .head .tab li.curr {
color: #1969f9;
}
.home-index .offer .box .head .tab li:last-child {
border-right: none;
}
.home-index .offer .box .list {
width: 100%;
}
.home-index .offer .box .list tr th {
height: 44px;
background: #F1F4FA;
border-radius: 2px 2px 0px 0px;
font-size: 14px;
color: #333333;
font-weight: normal;
}
.home-index .offer .box .list tr td {
height: 44px;
background: #FFFFFF;
font-size: 12px;
color: #333333;
}
.home-index .inquiry {
height: 300px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E5EBF6;
margin-top: 30px;
}
.home-index .inquiry .head {
margin-left: 20px;
border-bottom: 1px solid #E5EBF6;
}
.home-index .inquiry .head .tab li {
position: relative;
padding: 0 8px;
height: 42px;
background: #F1F4FA;
border-radius: 2px 2px 0px 0px;
border-right: 1px solid #E5EBF6;
border-left: 1px solid #E5EBF6;
font-size: 14px;
color: #646b78;
cursor: pointer;
}
.home-index .inquiry .head .tab li:first-child {
border-left: none;
border-right: none;
}
.home-index .inquiry .head .tab li.curr {
background: #FFFFFF;
color: #333333;
font-size: 16px;
}
.home-index .inquiry .head .tab li.curr:after {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #FFFFFF;
content: '';
bottom: -1px;
}
.home-index .inquiry .head .params-wrap .tabs {
width: 160px;
height: 28px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #BEC9DF;
text-align: center;
}
.home-index .inquiry .head .params-wrap .tabs li {
font-size: 12px;
color: #646b78;
text-align: center;
height: 21px;
border-right: 1px solid #BEC9DF;
padding: 0 5px;
cursor: pointer;
}
.home-index .inquiry .head .params-wrap .tabs li.curr {
color: #1969f9;
}
.home-index .inquiry .head .params-wrap .tabs li:last-child {
border-right: none;
}
.home-index .inquiry .wrap {
margin-top: 20px;
width: 100%;
}
.home-index .inquiry .wrap .box1 {
width: 80%;
}
.home-index .inquiry .wrap .box2 {
width: 20%;
}
.home-index .inquiry .wrap .box2 .t1 {
font-size: 12px;
color: #646b78;
margin-bottom: 6px;
}
.home-index .inquiry .wrap .box2 .inp {
width: 248px;
height: 32px;
border-radius: 2px;
border: 1px solid #BEC9DF;
text-indent: 10px;
font-size: 12px;
}
.home-index .inquiry .wrap .box2 .inp::-webkit-input-placeholder {
color: #a1acc1;
}
/*# sourceMappingURL=index.min.css.map */
\ No newline at end of file
src/assets/css/index/index.min.css.map
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACE,YAAA;EACA,kBAAA;;AAFF,WAIE;EACE,iBAAA;;AALJ,WAIE,YAGE;EACE,yBAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;;AAbN,WAIE,YAGE,GAQE,KACE;EACE,eAAA;EACA,cAAA;EACA,gBAAA;;AAnBV,WAIE,YAGE,GAQE,KAOE;EACE,WAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;;AA9BV,WAIE,YAGE,GA2BE;EACE,gBAAA;EACA,mBAAA;EACA,qBAAA;;AArCR,WAIE,YAGE,GA2BE,KAKE;EACE,kBAAA;;AAxCV,WAIE,YAGE,GA2BE,KASE;EACE,eAAA;EACA,cAAA;EACA,iBAAA;EACA,gBAAA;;AA/CV,WAIE,YAGE,GA2BE,KAgBE;EACE,eAAA;EACA,cAAA;EACA,iBAAA;EACA,iBAAA;EACA,gBAAA;;AAvDV,WAIE,YAGE,GAoDE,QACE;EACE,eAAA;EACA,cAAA;EACA,gBAAA;;AA/DV,WAIE,YAGE,GAoDE,QAOE;EACE,eAAA;EACA,cAAA;;AApEV,WA0EE;EACE,gBAAA;EACA,mBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;;AAjFJ,WA0EE,aASE;EACE,kBAAA;EACA,UAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;EACA,yBAAA;;AA7FN,WA0EE,aASE,GAYE;EACE,eAAA;EACA,cAAA;;AAjGR,WA0EE,aASE,GAiBE;EACE,eAAA;EACA,cAAA;EACA,gBAAA;;AAvGR,WA0EE,aASE,GAuBE;EACE,eAAA;EACA,cAAA;EACA,eAAA;;AA7GR,WA0EE,aASE,GA6BE;EACE,kBAAA;EACA,UAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;EACA,kCAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;;AA3HR,WA0EE,aASE,GA2CE;EACE,kBAAA;EACA,UAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;EACA,kCAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;;AAzIR,WA0EE,aASE,GAyDE;EACE,kBAAA;EACA,UAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;EACA,kCAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;;AAvJR,WA0EE,aASE,GAuEE;EACE,kBAAA;EACA,UAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;EACA,kCAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;;AArKR,WA0EE,aASE,GAqFE;EACE,kBAAA;EACA,UAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;EACA,kCAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;;AAGF,WA5GJ,aASE,GAmGG;EACC,WAAW,gBAAX;;AADF,WA5GJ,aASE,GAmGG,MAGC;EACE,cAAA;;AA1LV,WAgME;EACE,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;EACA,4BAAA;;AAtMJ,WAgME,UAQE,KACE;EACE,eAAA;EACA,cAAA;EACA,gBAAA;;AA5MR,WAgME,UAQE,KAME;EACE,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA","file":"index.min.css"}
\ No newline at end of file
{"version":3,"sources":["index.less"],"names":[],"mappings":"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","file":"index.min.css"}
\ No newline at end of file
src/views/Index/index.vue
......@@ -93,18 +93,113 @@
<div class="rate-box boxsiz">
<div class="top row bothSide">
<span class="title">报价转化率分析</span>
<ul class="tab row">
<li class="row rowCenter verCenter">报价率</li>
<ul class="tab row rowCenter verCenter boxsiz">
<li class="row rowCenter verCenter curr">报价率</li>
<li class="row rowCenter verCenter">选中率</li>
<li class="row rowCenter verCenter">成单率</li>
</ul>
</div>
<ul class="row status">
<li style="width: 30%" class="color1">
<span>90%</span>
</li>
<li style="width: 20%" class="color2">
<span>32%</span>
</li>
<li style="width: 20%" class="color3">
<span>32%</span>
</li>
</ul>
</div>
<div class="offer row boxsiz">
<div class="box column boxsiz">
<div class="head row bothSide boxsiz">
<span class="t1">报价优势分析</span>
<ul class="tab row rowCenter verCenter boxsiz">
<li class="row rowCenter verCenter curr">今日</li>
<li class="row rowCenter verCenter">本周</li>
<li class="row rowCenter verCenter">本月</li>
<li class="row rowCenter verCenter">全年</li>
</ul>
</div>
<div id="echarts_box" style="width: 100%;height:300px;"></div>
</div>
<div class="box boxsiz">
<table class="list">
<tbody>
<tr>
<th>周排名</th>
<th align="left">优势型号</th>
<th align="left">品牌</th>
<th align="left">上榜次数</th>
</tr>
<tr>
<td>1</td>
<td>NRF51822-QFAA-NRF51822</td>
<td>NORDIC</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>NRF51822-QFAA-NRF51822</td>
<td>NORDIC</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>NRF51822-QFAA-NRF51822</td>
<td>NORDIC</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>NRF51822-QFAA-NRF51822</td>
<td>NORDIC</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>NRF51822-QFAA-NRF51822</td>
<td>NORDIC</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="inquiry">
<div class="head row bothSide verCenter boxsiz">
<ul class="tab row boxsiz">
<li class="row rowCenter verCenter boxsiz curr">询报价总数</li>
<li class="row rowCenter verCenter boxsiz">未报价型号数</li>
</ul>
<div class="params-wrap row">
<ul class="tabs row rowCenter verCenter boxsiz">
<li class="row rowCenter verCenter curr">今日</li>
<li class="row rowCenter verCenter">本周</li>
<li class="row rowCenter verCenter">本月</li>
<li class="row rowCenter verCenter">全年</li>
</ul>
</div>
</div>
<div class="wrap row">
<div class="box1">
<div id="echarts_box1" style="width: 100%;height:200px;"></div>
</div>
<div class="box2">
<p class="t1">单个型号询报价总数分析</p>
<input type="text" placeholder="请输入型号" class="inp boxsiz"/>
<div id="echarts_box2" style="width: 100%;height:200px;"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import * as echarts from 'echarts';
import {
Button,
Message
......@@ -120,6 +215,75 @@
created() {
},
mounted() {
var myChart = echarts.init(document.getElementById('echarts_box'));
var myChart1 = echarts.init(document.getElementById('echarts_box1'));
var myChart2 = echarts.init(document.getElementById('echarts_box2'));
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}, {
data: [120, 232, 901, 134, 50, 1330, 1320],
type: 'line',
smooth: true
}]
};
var option1 = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: ''},
{value: 735, name: ''},
{value: 580, name: ''},
{value: 484, name: ''},
{value: 300, name: ''}
]
}
]
};
myChart.setOption(option);
myChart1.setOption(option);
myChart2.setOption(option1);
},
computed: {},
methods: {
ceshi() {
......
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 sign in to comment