Skip to content

肖康 / cloudSystem

Go to a project
Commit 98e120e1 by liangjianmin
Options

css

parent e3c53dfc
Expand all
Inline Side-by-side
Showing with 649 additions and 8 deletions
src/assets/css/font/demo_index.html
...@@ -55,6 +55,30 @@ ...@@ -55,6 +55,30 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe736;</span>
<div class="name">禁止 (2)</div>
<div class="code-name">&amp;#xe736;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe737;</span>
<div class="name">禁止</div>
<div class="code-name">&amp;#xe737;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe738;</span>
<div class="name">禁止 (3)</div>
<div class="code-name">&amp;#xe738;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe739;</span>
<div class="name">禁止 (1)</div>
<div class="code-name">&amp;#xe739;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe735;</span> <span class="icon iconfont">&#xe735;</span>
<div class="name">登录-密码备份</div> <div class="name">登录-密码备份</div>
<div class="code-name">&amp;#xe735;</div> <div class="code-name">&amp;#xe735;</div>
...@@ -156,9 +180,9 @@ ...@@ -156,9 +180,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1620617588072') format('woff2'), src: url('iconfont.woff2?t=1620699989551') format('woff2'),
url('iconfont.woff?t=1620617588072') format('woff'), url('iconfont.woff?t=1620699989551') format('woff'),
url('iconfont.ttf?t=1620617588072') format('truetype'); url('iconfont.ttf?t=1620699989551') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -185,6 +209,42 @@ ...@@ -185,6 +209,42 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont iconjinzhi2"></span>
<div class="name">
禁止 (2)
</div>
<div class="code-name">.iconjinzhi2
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjinzhi"></span>
<div class="name">
禁止
</div>
<div class="code-name">.iconjinzhi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjinzhi3"></span>
<div class="name">
禁止 (3)
</div>
<div class="code-name">.iconjinzhi3
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjinzhi1"></span>
<div class="name">
禁止 (1)
</div>
<div class="code-name">.iconjinzhi1
</div>
</li>
<li class="dib">
<span class="icon iconfont icondenglu-mimabeifen"></span> <span class="icon iconfont icondenglu-mimabeifen"></span>
<div class="name"> <div class="name">
登录-密码备份 登录-密码备份
...@@ -339,6 +399,38 @@ ...@@ -339,6 +399,38 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjinzhi2"></use>
</svg>
<div class="name">禁止 (2)</div>
<div class="code-name">#iconjinzhi2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjinzhi"></use>
</svg>
<div class="name">禁止</div>
<div class="code-name">#iconjinzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjinzhi3"></use>
</svg>
<div class="name">禁止 (3)</div>
<div class="code-name">#iconjinzhi3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjinzhi1"></use>
</svg>
<div class="name">禁止 (1)</div>
<div class="code-name">#iconjinzhi1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondenglu-mimabeifen"></use> <use xlink:href="#icondenglu-mimabeifen"></use>
</svg> </svg>
<div class="name">登录-密码备份</div> <div class="name">登录-密码备份</div>
......
src/assets/css/font/iconfont.css
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2537242 */ font-family: "iconfont"; /* Project id 2537242 */
src: url('iconfont.woff2?t=1620617588072') format('woff2'), src: url('iconfont.woff2?t=1620699989551') format('woff2'),
url('iconfont.woff?t=1620617588072') format('woff'), url('iconfont.woff?t=1620699989551') format('woff'),
url('iconfont.ttf?t=1620617588072') format('truetype'); url('iconfont.ttf?t=1620699989551') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,22 @@ ...@@ -13,6 +13,22 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.iconjinzhi2:before {
content: "\e736";
}
.iconjinzhi:before {
content: "\e737";
}
.iconjinzhi3:before {
content: "\e738";
}
.iconjinzhi1:before {
content: "\e739";
}
.icondenglu-mimabeifen:before { .icondenglu-mimabeifen:before {
content: "\e735"; content: "\e735";
} }
......
src/assets/css/font/iconfont.json
...@@ -6,6 +6,34 @@ ...@@ -6,6 +6,34 @@
"description": "猎芯云芯系统前端", "description": "猎芯云芯系统前端",
"glyphs": [ "glyphs": [
{ {
"icon_id": "21511736",
"name": "禁止 (2)",
"font_class": "jinzhi2",
"unicode": "e736",
"unicode_decimal": 59190
},
{
"icon_id": "21511737",
"name": "禁止",
"font_class": "jinzhi",
"unicode": "e737",
"unicode_decimal": 59191
},
{
"icon_id": "21511738",
"name": "禁止 (3)",
"font_class": "jinzhi3",
"unicode": "e738",
"unicode_decimal": 59192
},
{
"icon_id": "21511739",
"name": "禁止 (1)",
"font_class": "jinzhi1",
"unicode": "e739",
"unicode_decimal": 59193
},
{
"icon_id": "21489014", "icon_id": "21489014",
"name": "登录-密码备份", "name": "登录-密码备份",
"font_class": "denglu-mimabeifen", "font_class": "denglu-mimabeifen",
......
src/assets/css/index/index.less
.home-index {
width: 99.8%;
padding-left: 20px;
.survey-top {
padding-top: 20px;
li {
padding: 7px 8px 9px 12px;
width: 24%;
height: 128px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E5EBF6;
.top {
.t1 {
font-size: 14px;
color: #333333;
font-weight: 500;
}
.t2 {
width: 24px;
height: 24px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #BEC9DF;
font-size: 14px;
color: #646b78;
cursor: pointer;
}
}
.cen {
margin-top: 13px;
margin-bottom: 18px;
align-items: flex-end;
.mr {
margin-right: 26px;
}
.t1 {
font-size: 14px;
color: #333333;
line-height: 20px;
font-weight: 500;
}
.t2 {
font-size: 30px;
color: #1969f9;
font-weight: bold;
line-height: 35px;
margin-left: 3px;
}
}
.bottom {
.t1 {
font-size: 12px;
color: #646b78;
font-weight: 500;
}
.t2 {
font-size: 12px;
color: #333333;
}
}
}
}
.survey-show {
margin-top: 25px;
margin-bottom: 25px;
padding: 20px 0 17px 0;
height: 131px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E5EBF6;
li {
position: relative;
width: 15%;
height: 94px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #E5EBF6;
padding-top: 20px;
padding-left: 10px;
cursor: pointer;
transition: all 0.4s ease;
.iconfont {
font-size: 30px;
color: #A3ADC2;
}
.t1 {
font-size: 14px;
color: #333333;
margin-top: 11px;
}
.t2 {
font-size: 14px;
color: #a1acc1;
margin-top: 8px;
}
.color1 {
position: absolute;
right: 7px;
top: -21px;
width: 45px;
height: 40px;
line-height: 40px;
background: #F35656;
border-radius: 0px 0px 100px 100px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
.color2 {
position: absolute;
right: 7px;
top: -21px;
width: 45px;
height: 40px;
line-height: 40px;
background: #FC7A28;
border-radius: 0px 0px 100px 100px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
.color3 {
position: absolute;
right: 7px;
top: -21px;
width: 45px;
height: 40px;
line-height: 40px;
background: #EEB602;
border-radius: 0px 0px 100px 100px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
.color4 {
position: absolute;
right: 7px;
top: -21px;
width: 45px;
height: 40px;
line-height: 40px;
background: #29C0D6;
border-radius: 0px 0px 100px 100px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
.color5 {
position: absolute;
right: 7px;
top: -21px;
width: 45px;
height: 40px;
line-height: 40px;
background: #4DD35B;
border-radius: 0px 0px 100px 100px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
&:hover {
transform: translateY(-8px);
.t1 {
color: #1969f9;
}
}
}
}
.rate-box {
margin-top: 25px;
height: 178px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E5EBF6;
padding: 10px 10px 12px 12px;
.top {
.title {
font-size: 16px;
color: #333333;
font-weight: 500;
}
.tab{
width: 160px;
height: 28px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #BEC9DF;
}
}
}
}
\ No newline at end of file
src/assets/css/index/index.min.css
.home-index {
width: 99.8%;
padding-left: 20px;
}
.home-index .survey-top {
padding-top: 20px;
}
.home-index .survey-top li {
padding: 7px 8px 9px 12px;
width: 24%;
height: 128px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E5EBF6;
}
.home-index .survey-top li .top .t1 {
font-size: 14px;
color: #333333;
font-weight: 500;
}
.home-index .survey-top li .top .t2 {
width: 24px;
height: 24px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #BEC9DF;
font-size: 14px;
color: #646b78;
cursor: pointer;
}
.home-index .survey-top li .cen {
margin-top: 13px;
margin-bottom: 18px;
align-items: flex-end;
}
.home-index .survey-top li .cen .mr {
margin-right: 26px;
}
.home-index .survey-top li .cen .t1 {
font-size: 14px;
color: #333333;
line-height: 20px;
font-weight: 500;
}
.home-index .survey-top li .cen .t2 {
font-size: 30px;
color: #1969f9;
font-weight: bold;
line-height: 35px;
margin-left: 3px;
}
.home-index .survey-top li .bottom .t1 {
font-size: 12px;
color: #646b78;
font-weight: 500;
}
.home-index .survey-top li .bottom .t2 {
font-size: 12px;
color: #333333;
}
.home-index .survey-show {
margin-top: 25px;
margin-bottom: 25px;
padding: 20px 0 17px 0;
height: 131px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E5EBF6;
}
.home-index .survey-show li {
position: relative;
width: 15%;
height: 94px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #E5EBF6;
padding-top: 20px;
padding-left: 10px;
cursor: pointer;
transition: all 0.4s ease;
}
.home-index .survey-show li .iconfont {
font-size: 30px;
color: #A3ADC2;
}
.home-index .survey-show li .t1 {
font-size: 14px;
color: #333333;
margin-top: 11px;
}
.home-index .survey-show li .t2 {
font-size: 14px;
color: #a1acc1;
margin-top: 8px;
}
.home-index .survey-show li .color1 {
position: absolute;
right: 7px;
top: -21px;
width: 45px;
height: 40px;
line-height: 40px;
background: #F35656;
border-radius: 0px 0px 100px 100px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
.home-index .survey-show li .color2 {
position: absolute;
right: 7px;
top: -21px;
width: 45px;
height: 40px;
line-height: 40px;
background: #FC7A28;
border-radius: 0px 0px 100px 100px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
.home-index .survey-show li .color3 {
position: absolute;
right: 7px;
top: -21px;
width: 45px;
height: 40px;
line-height: 40px;
background: #EEB602;
border-radius: 0px 0px 100px 100px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
.home-index .survey-show li .color4 {
position: absolute;
right: 7px;
top: -21px;
width: 45px;
height: 40px;
line-height: 40px;
background: #29C0D6;
border-radius: 0px 0px 100px 100px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
.home-index .survey-show li .color5 {
position: absolute;
right: 7px;
top: -21px;
width: 45px;
height: 40px;
line-height: 40px;
background: #4DD35B;
border-radius: 0px 0px 100px 100px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
.home-index .survey-show li:hover {
transform: translateY(-8px);
}
.home-index .survey-show li:hover .t1 {
color: #1969f9;
}
.home-index .rate-box {
margin-top: 25px;
height: 178px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E5EBF6;
padding: 10px 10px 12px 12px;
}
.home-index .rate-box .top .title {
font-size: 16px;
color: #333333;
font-weight: 500;
}
.home-index .rate-box .top .tab {
width: 160px;
height: 28px;
background: #F1F4FA;
border-radius: 2px;
border: 1px solid #BEC9DF;
}
/*# 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
src/views/Index/index.vue
<template> <template>
<div class="index pagex"> <div class="home-index boxsiz">
<Menu/> <Menu/>
<ul class="survey-top row bothSide">
<li class="boxsiz">
<p class="top row bothSide verCenter">
<span class="t1">SKU数</span>
<em class="t2 row rowCenter verCenter boxsiz">周</em>
</p>
<p class="cen row rowCenter">
<span class="t1">上架</span>
<span class="t2">350</span>
</p>
<p class="bottom">
<span class="t1">总上传SKU数：</span>
<span class="t2">23569</span>
</p>
</li>
<li class="boxsiz">
<p class="top row bothSide verCenter">
<span class="t1">SKU数</span>
<em class="t2 row rowCenter verCenter boxsiz">周</em>
</p>
<p class="cen row rowCenter">
<span class="t1">型号</span>
<span class="t2 mr">200</span>
<span class="t1">品牌</span>
<span class="t2">8</span>
</p>
<p class="bottom">
<span class="t1">总上传SKU数：</span>
<span class="t2">23569</span>
</p>
</li>
<li class="boxsiz">
<p class="top row bothSide verCenter">
<span class="t1">询价总型号数</span>
<em class="t2 row rowCenter verCenter boxsiz">周</em>
</p>
<p class="cen row rowCenter">
<span class="t2">350</span>
</p>
<p class="bottom">
<span class="t1">历史询价总型号数：</span>
<span class="t2">23569</span>
</p>
</li>
<li class="boxsiz">
<p class="top row bothSide verCenter">
<span class="t1">报价总型号数</span>
<em class="t2 row rowCenter verCenter boxsiz">周</em>
</p>
<p class="cen row rowCenter">
<span class="t2">200</span>
</p>
<p class="bottom">
<span class="t1">历史报价总型号数：</span>
<span class="t2">235619</span>
</p>
</li>
</ul>
<ul class="survey-show row avarage boxsiz">
<li class="column boxsiz">
<i class="iconfont iconjinzhi"></i>
<p class="t1">未通过SKU</p>
<span class="color1 rowCenter verCenter">20</span>
</li>
<li class="boxsiz">
<i class="iconfont iconclose"></i>
<p class="t1">下架SKU</p>
<span class="color2">20</span>
</li>
<li class="boxsiz">
<i class="iconfont iconjinzhi1"></i>
<p class="t1">待报价</p>
<span class="color3">20</span>
</li>
<li class="boxsiz">
<i class="iconfont iconjinzhi2"></i>
<p class="t1">已选中报价</p>
<span class="color4">20</span>
</li>
<li class="boxsiz">
<i class="iconfont iconjinzhi2"></i>
<p class="t1">已成单报价</p>
<span class="color5">20</span>
</li>
<li class="column rowCenter verCenter boxsiz">
<i class="iconfont iconjinzhi3 "></i>
<p class="t2">未完待续</p>
</li>
</ul>
<div class="rate-box boxsiz">
<div class="top row bothSide">
<span class="title">报价转化率分析</span>
<ul class="tab row">
<li class="row rowCenter verCenter">报价率</li>
<li class="row rowCenter verCenter">选中率</li>
<li class="row rowCenter verCenter">成单率</li>
</ul>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
......
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