Skip to content

梁建民 / h5

Go to a project
Commit 3c43b111 by liangjianmin
Options

css

parent fbe2ccf8
Expand all
Inline Side-by-side
Showing with 265 additions and 3 deletions
package.json
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
"@vue/cli-plugin-babel": "^3.3.0", "@vue/cli-plugin-babel": "^3.3.0",
"@vue/cli-service": "^3.3.0", "@vue/cli-service": "^3.3.0",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"node-sass": "^4.9.0", "node-sass": "^4.14.1",
"qs": "^6.6.0", "qs": "^6.6.0",
"sass-loader": "^7.0.1", "sass-loader": "^7.0.1",
"vconsole": "^3.2.2", "vconsole": "^3.2.2",
......
src/assets/css/user/message.css
.user-messgae {
min-height: 100%;
background: #F8F8F8;
}
.user-messgae .tab {
position: relative;
height: 49px;
background: #ffffff;
}
.user-messgae .tab li {
height: 26px;
font-size: 14px;
color: #333333;
border-right: 1px solid #E5E5E5;
flex: 0 0 50%;
text-align: center;
}
.user-messgae .tab li span {
position: relative;
min-width: 57px;
}
.user-messgae .tab li.curr {
color: #1969f9;
}
.user-messgae .tab li.curr span:after {
position: absolute;
left: 0;
right: 0;
bottom: -15px;
width: 100%;
min-width: 57px;
height: 2px;
background: #1969F9;
margin: 0 auto;
content: '';
}
.user-messgae .content {
margin-top: 0.83rem;
}
.user-messgae .content .list {
padding: 0 0.2rem;
}
.user-messgae .content .list li {
position: relative;
background: #ffffff;
box-shadow: 0px 0px 4px 0px rgba(180, 202, 211, 0.38);
border-radius: 3px;
padding: 0.28rem 0 0.32rem 0.24rem;
margin-bottom: 0.27rem;
}
.user-messgae .content .list li .iconfont {
font-size: 15px;
color: #363636;
}
.user-messgae .content .list li .text {
padding-left: 0.13rem;
}
.user-messgae .content .list li .text .t1 {
width: 6.72rem;
font-size: 14px;
color: #333333;
font-weight: bold;
margin-bottom: 0.23rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-messgae .content .list li .text .t2 {
width: 7.77rem;
font-size: 12px;
color: #6f6f6f;
line-height: 23px;
}
.user-messgae .content .list li .time {
position: absolute;
right: 0.13rem;
top: 0.33rem;
font-size: 12px;
color: #6f6f6f;
}
.user-messgae .content .list li .toggle {
position: absolute;
right: 0;
bottom: 0;
width: 52px;
height: 21px;
background: #F8F8F8;
border-radius: 45px 0px 3px 0px;
border: 1px solid #DEDDDD;
font-size: 12px;
color: #6f6f6f;
}
.user-messgae .content .list li.curr {
border: 1px solid #387FFF;
}
.user-messgae .content .list li.curr .toggle {
border: 1px solid #1969F9;
border-bottom: none;
border-right: none;
}
/*# sourceMappingURL=message.css.map */
\ No newline at end of file
src/assets/css/user/message.css.map
{"version":3,"sources":["message.less"],"names":[],"mappings":"AAAA;EACE,gBAAA;EACA,mBAAA;;AAFF,aAIE;EACE,kBAAA;EACA,YAAA;EACA,mBAAA;;AAPJ,aAIE,KAKE;EACE,YAAA;EACA,eAAA;EACA,cAAA;EACA,+BAAA;EACA,aAAA;EACA,kBAAA;;AAfN,aAIE,KAKE,GAQE;EACE,kBAAA;EACA,eAAA;;AAGF,aAlBJ,KAKE,GAaG;EACC,cAAA;;AAGE,aAtBR,KAKE,GAaG,KAGC,KACG;EACC,kBAAA;EACA,OAAA;EACA,QAAA;EACA,aAAA;EACA,WAAA;EACA,eAAA;EACA,WAAA;EACA,mBAAA;EACA,cAAA;EACA,SAAS,EAAT;;AApCZ,aA2CE;EACE,mBAAA;;AA5CJ,aA2CE,SAGE;EACE,iBAAA;;AA/CN,aA2CE,SAGE,MAGE;EACE,kBAAA;EACA,mBAAA;EACA,qDAAA;EACA,kBAAA;EACA,kCAAA;EACA,sBAAA;;AAvDR,aA2CE,SAGE,MAGE,GAQE;EACE,eAAA;EACA,cAAA;;AA3DV,aA2CE,SAGE,MAGE,GAaE;EACE,qBAAA;;AA/DV,aA2CE,SAGE,MAGE,GAaE,MAGE;EACE,cAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,sBAAA;EACA,mBAAA;EACA,gBAAA;EACA,uBAAA;;AAzEZ,aA2CE,SAGE,MAGE,GAaE,MAcE;EACE,cAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;;AAhFZ,aA2CE,SAGE,MAGE,GAmCE;EACE,kBAAA;EACA,cAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;;AAzFV,aA2CE,SAGE,MAGE,GA2CE;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,+BAAA;EACA,yBAAA;EACA,eAAA;EACA,cAAA;;AAGF,aA9DN,SAGE,MAGE,GAwDG;EACC,yBAAA;;AADF,aA9DN,SAGE,MAGE,GAwDG,KAEC;EACE,yBAAA;EACA,mBAAA;EACA,kBAAA","file":"message.css"}
\ No newline at end of file
src/assets/css/user/message.less
.user-messgae { .user-messgae {
min-height: 100%;
background: #F8F8F8;
.tab {
position: relative;
height: 49px;
background: #ffffff;
li {
height: 26px;
font-size: 14px;
color: #333333;
border-right: 1px solid #E5E5E5;
flex: 0 0 50%;
text-align: center;
span {
position: relative;
min-width: 57px;
}
&.curr {
color: #1969f9;
span {
&:after {
position: absolute;
left: 0;
right: 0;
bottom: -15px;
width: 100%;
min-width: 57px;
height: 2px;
background: #1969F9;
margin: 0 auto;
content: '';
}
}
}
}
}
.content {
margin-top: 0.83rem;
.list {
padding: 0 0.2rem;
li {
position: relative;
background: #ffffff;
box-shadow: 0px 0px 4px 0px rgba(180, 202, 211, 0.38);
border-radius: 3px;
padding: 0.28rem 0 0.32rem 0.24rem;
margin-bottom: 0.27rem;
.iconfont {
font-size: 15px;
color: #363636;
}
.text {
padding-left: 0.13rem;
.t1 {
width: 6.72rem;
font-size: 14px;
color: #333333;
font-weight: bold;
margin-bottom: 0.23rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t2 {
width: 7.77rem;
font-size: 12px;
color: #6f6f6f;
line-height: 23px;
}
}
.time {
position: absolute;
right: 0.13rem;
top: 0.33rem;
font-size: 12px;
color: #6f6f6f;
}
.toggle {
position: absolute;
right: 0;
bottom: 0;
width: 52px;
height: 21px;
background: #F8F8F8;
border-radius: 45px 0px 3px 0px;
border: 1px solid #DEDDDD;
font-size: 12px;
color: #6f6f6f;
}
&.curr{
border: 1px solid #387FFF;
.toggle{
border: 1px solid #1969F9;
border-bottom: none;
border-right: none;
}
}
}
}
}
} }
\ No newline at end of file
src/views/user/message.vue
<template> <template>
<section class="user-messgae"> <section class="user-messgae">
messgae <ul class="tab row avarage verCenter">
<li class="row rowCenter verCente curr"><span>全部</span></li>
<li class="row rowCenter verCenter"><span>我的优惠&奖励</span></li>
</ul>
<div class="content">
<ul class="list">
<li class="row">
<i class="iconfont iconhuodong"></i>
<div class="text">
<p class="t1">活动类：活动奖励发放京东卡通知</p>
<p class="t2">恭喜您获得优质客户回馈活动，622.56元京</p>
</div>
<span class="time">2020/10/22</span>
<span class="toggle row rowCenter verCenter">展开</span>
</li>
<li class="row">
<i class="iconfont icongonggao"></i>
<div class="text">
<p class="t1">公告类：活动奖励发放京东卡通知</p>
<p class="t2">恭喜您获得优质客户回馈活动，622.56元京</p>
</div>
<span class="time">2020/10/22</span>
<span class="toggle row rowCenter verCenter">展开</span>
</li>
<li class="row">
<i class="iconfont iconxinwen"></i>
<div class="text">
<p class="t1">新闻类：活动奖励发放京东卡通知</p>
<p class="t2">恭喜您获得优质客户回馈活动，622.56元京</p>
</div>
<span class="time">2020/10/22</span>
<span class="toggle row rowCenter verCenter">展开</span>
</li>
<li class="row curr">
<i class="iconfont iconqita"></i>
<div class="text">
<p class="t1">新闻类：活动奖励发放京东卡通知</p>
<p class="t2">恭喜您获得优质客户回馈活动，622.56元京恭喜您获得优质客户回馈活动，622.56元京恭喜您获得优质客户回馈活动，恭喜您获得优质客户回馈活动元京恭喜。</p>
</div>
<span class="time">2020/10/22</span>
<span class="toggle row rowCenter verCenter">展开</span>
</li>
</ul>
</div>
</section> </section>
</template> </template>
......
view/0.js
This diff could not be displayed because it is too large.
view/1.js
This diff could not be displayed because it is too large.
view/10.js
This diff could not be displayed because it is too large.
view/11.js
This diff could not be displayed because it is too large.
view/12.js
This diff could not be displayed because it is too large.
view/13.js
This diff could not be displayed because it is too large.
view/14.js
This diff could not be displayed because it is too large.
view/15.js
This diff could not be displayed because it is too large.
view/16.js
This diff could not be displayed because it is too large.
view/17.js
This diff could not be displayed because it is too large.
view/18.js
This diff could not be displayed because it is too large.
view/19.js
This diff could not be displayed because it is too large.
view/2.js
This diff could not be displayed because it is too large.
view/20.js
This diff could not be displayed because it is too large.
view/21.js
This diff could not be displayed because it is too large.
view/23.js
This diff could not be displayed because it is too large.
view/25.js
This diff could not be displayed because it is too large.
view/28.js
This diff could not be displayed because it is too large.
view/29.js
This diff could not be displayed because it is too large.
view/32.js
This diff could not be displayed because it is too large.
view/33.js
This diff could not be displayed because it is too large.
view/35.js
This diff could not be displayed because it is too large.
view/4.js
This diff could not be displayed because it is too large.
view/41.js
This diff could not be displayed because it is too large.
view/43.js
This diff could not be displayed because it is too large.
view/44.js
This diff could not be displayed because it is too large.
view/45.js
This diff could not be displayed because it is too large.
view/46.js
This diff could not be displayed because it is too large.
view/47.js
This diff could not be displayed because it is too large.
view/48.js
This diff could not be displayed because it is too large.
view/49.js
This diff could not be displayed because it is too large.
view/5.js
This diff could not be displayed because it is too large.
view/50.js
This diff could not be displayed because it is too large.
view/51.js
This diff could not be displayed because it is too large.
view/52.js
This diff could not be displayed because it is too large.
view/53.js
This diff could not be displayed because it is too large.
view/54.js
This diff could not be displayed because it is too large.
view/55.js
This diff could not be displayed because it is too large.
view/56.js
This diff could not be displayed because it is too large.
view/57.js
This diff could not be displayed because it is too large.
view/58.js
This diff could not be displayed because it is too large.
view/59.js
This diff could not be displayed because it is too large.
view/6.js
This diff could not be displayed because it is too large.
view/60.js
This diff could not be displayed because it is too large.
view/61.js
This diff could not be displayed because it is too large.
view/62.js
This diff could not be displayed because it is too large.
view/63.js
This diff could not be displayed because it is too large.
view/7.js
This diff could not be displayed because it is too large.
view/8.js
This diff could not be displayed because it is too large.
view/9.js
This diff could not be displayed because it is too large.
view/app.js
This diff could not be displayed because it is too large.
view/index.html
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<script src="https://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js" type="text/javascript" charset="utf-8"></script> <script src="https://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js" type="text/javascript" charset="utf-8"></script>
<script src="//static.leixin.com/static/js/flexible.min.js" type="text/javascript" charset="utf-8"></script> <script src="//static.leixin.com/static/js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//static.leixin.com/static/js/shence.min.js" type="text/javascript" charset="utf-8"></script> <script src="//static.leixin.com/static/js/shence.min.js" type="text/javascript" charset="utf-8"></script>
<link href="//static.leixin.com/0.js" rel="prefetch"><link href="//static.leixin.com/1.js" rel="prefetch"><link href="//static.leixin.com/10.js" rel="prefetch"><link href="//static.leixin.com/11.js" rel="prefetch"><link href="//static.leixin.com/12.js" rel="prefetch"><link href="//static.leixin.com/13.js" rel="prefetch"><link href="//static.leixin.com/14.js" rel="prefetch"><link href="//static.leixin.com/15.js" rel="prefetch"><link href="//static.leixin.com/16.js" rel="prefetch"><link href="//static.leixin.com/17.js" rel="prefetch"><link href="//static.leixin.com/18.js" rel="prefetch"><link href="//static.leixin.com/19.js" rel="prefetch"><link href="//static.leixin.com/2.js" rel="prefetch"><link href="//static.leixin.com/20.js" rel="prefetch"><link href="//static.leixin.com/21.js" rel="prefetch"><link href="//static.leixin.com/22.js" rel="prefetch"><link href="//static.leixin.com/23.js" rel="prefetch"><link href="//static.leixin.com/24.js" rel="prefetch"><link href="//static.leixin.com/25.js" rel="prefetch"><link href="//static.leixin.com/26.js" rel="prefetch"><link href="//static.leixin.com/27.js" rel="prefetch"><link href="//static.leixin.com/28.js" rel="prefetch"><link href="//static.leixin.com/29.js" rel="prefetch"><link href="//static.leixin.com/3.js" rel="prefetch"><link href="//static.leixin.com/30.js" rel="prefetch"><link href="//static.leixin.com/31.js" rel="prefetch"><link href="//static.leixin.com/32.js" rel="prefetch"><link href="//static.leixin.com/33.js" rel="prefetch"><link href="//static.leixin.com/34.js" rel="prefetch"><link href="//static.leixin.com/35.js" rel="prefetch"><link href="//static.leixin.com/36.js" rel="prefetch"><link href="//static.leixin.com/37.js" rel="prefetch"><link href="//static.leixin.com/38.js" rel="prefetch"><link href="//static.leixin.com/39.js" rel="prefetch"><link href="//static.leixin.com/4.js" rel="prefetch"><link href="//static.leixin.com/40.js" rel="prefetch"><link href="//static.leixin.com/41.js" rel="prefetch"><link href="//static.leixin.com/42.js" rel="prefetch"><link href="//static.leixin.com/43.js" rel="prefetch"><link href="//static.leixin.com/44.js" rel="prefetch"><link href="//static.leixin.com/45.js" rel="prefetch"><link href="//static.leixin.com/46.js" rel="prefetch"><link href="//static.leixin.com/47.js" rel="prefetch"><link href="//static.leixin.com/48.js" rel="prefetch"><link href="//static.leixin.com/49.js" rel="prefetch"><link href="//static.leixin.com/5.js" rel="prefetch"><link href="//static.leixin.com/50.js" rel="prefetch"><link href="//static.leixin.com/51.js" rel="prefetch"><link href="//static.leixin.com/52.js" rel="prefetch"><link href="//static.leixin.com/53.js" rel="prefetch"><link href="//static.leixin.com/54.js" rel="prefetch"><link href="//static.leixin.com/55.js" rel="prefetch"><link href="//static.leixin.com/56.js" rel="prefetch"><link href="//static.leixin.com/57.js" rel="prefetch"><link href="//static.leixin.com/58.js" rel="prefetch"><link href="//static.leixin.com/59.js" rel="prefetch"><link href="//static.leixin.com/6.js" rel="prefetch"><link href="//static.leixin.com/60.js" rel="prefetch"><link href="//static.leixin.com/61.js" rel="prefetch"><link href="//static.leixin.com/62.js" rel="prefetch"><link href="//static.leixin.com/7.js" rel="prefetch"><link href="//static.leixin.com/8.js" rel="prefetch"><link href="//static.leixin.com/9.js" rel="prefetch"><link href="//static.leixin.com/app.js" rel="preload" as="script"></head> <link href="//static.leixin.com/0.js" rel="prefetch"><link href="//static.leixin.com/1.js" rel="prefetch"><link href="//static.leixin.com/10.js" rel="prefetch"><link href="//static.leixin.com/11.js" rel="prefetch"><link href="//static.leixin.com/12.js" rel="prefetch"><link href="//static.leixin.com/13.js" rel="prefetch"><link href="//static.leixin.com/14.js" rel="prefetch"><link href="//static.leixin.com/15.js" rel="prefetch"><link href="//static.leixin.com/16.js" rel="prefetch"><link href="//static.leixin.com/17.js" rel="prefetch"><link href="//static.leixin.com/18.js" rel="prefetch"><link href="//static.leixin.com/19.js" rel="prefetch"><link href="//static.leixin.com/2.js" rel="prefetch"><link href="//static.leixin.com/20.js" rel="prefetch"><link href="//static.leixin.com/21.js" rel="prefetch"><link href="//static.leixin.com/22.js" rel="prefetch"><link href="//static.leixin.com/23.js" rel="prefetch"><link href="//static.leixin.com/24.js" rel="prefetch"><link href="//static.leixin.com/25.js" rel="prefetch"><link href="//static.leixin.com/26.js" rel="prefetch"><link href="//static.leixin.com/27.js" rel="prefetch"><link href="//static.leixin.com/28.js" rel="prefetch"><link href="//static.leixin.com/29.js" rel="prefetch"><link href="//static.leixin.com/3.js" rel="prefetch"><link href="//static.leixin.com/30.js" rel="prefetch"><link href="//static.leixin.com/31.js" rel="prefetch"><link href="//static.leixin.com/32.js" rel="prefetch"><link href="//static.leixin.com/33.js" rel="prefetch"><link href="//static.leixin.com/34.js" rel="prefetch"><link href="//static.leixin.com/35.js" rel="prefetch"><link href="//static.leixin.com/36.js" rel="prefetch"><link href="//static.leixin.com/37.js" rel="prefetch"><link href="//static.leixin.com/38.js" rel="prefetch"><link href="//static.leixin.com/39.js" rel="prefetch"><link href="//static.leixin.com/4.js" rel="prefetch"><link href="//static.leixin.com/40.js" rel="prefetch"><link href="//static.leixin.com/41.js" rel="prefetch"><link href="//static.leixin.com/42.js" rel="prefetch"><link href="//static.leixin.com/43.js" rel="prefetch"><link href="//static.leixin.com/44.js" rel="prefetch"><link href="//static.leixin.com/45.js" rel="prefetch"><link href="//static.leixin.com/46.js" rel="prefetch"><link href="//static.leixin.com/47.js" rel="prefetch"><link href="//static.leixin.com/48.js" rel="prefetch"><link href="//static.leixin.com/49.js" rel="prefetch"><link href="//static.leixin.com/5.js" rel="prefetch"><link href="//static.leixin.com/50.js" rel="prefetch"><link href="//static.leixin.com/51.js" rel="prefetch"><link href="//static.leixin.com/52.js" rel="prefetch"><link href="//static.leixin.com/53.js" rel="prefetch"><link href="//static.leixin.com/54.js" rel="prefetch"><link href="//static.leixin.com/55.js" rel="prefetch"><link href="//static.leixin.com/56.js" rel="prefetch"><link href="//static.leixin.com/57.js" rel="prefetch"><link href="//static.leixin.com/58.js" rel="prefetch"><link href="//static.leixin.com/59.js" rel="prefetch"><link href="//static.leixin.com/6.js" rel="prefetch"><link href="//static.leixin.com/60.js" rel="prefetch"><link href="//static.leixin.com/61.js" rel="prefetch"><link href="//static.leixin.com/62.js" rel="prefetch"><link href="//static.leixin.com/63.js" rel="prefetch"><link href="//static.leixin.com/7.js" rel="prefetch"><link href="//static.leixin.com/8.js" rel="prefetch"><link href="//static.leixin.com/9.js" rel="prefetch"><link href="//static.leixin.com/app.js" rel="preload" as="script"></head>
<body class="boxsiz"> <body class="boxsiz">
<noscript> <noscript>
<strong>网站出现了一点小问题，正在紧急修复中.......</strong> <strong>网站出现了一点小问题，正在紧急修复中.......</strong>
......
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