Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
65f946c5 by 任超
Options

feat:好差评

1 parent cef5f83f
Inline Side-by-side
Showing 3 changed files with 248 additions and 18 deletions
.evaluate {
width: 1200px;
margin: 0 auto;
overflow: auto;
}
.evaluate_nav {
font-size: 0;
......@@ -98,4 +99,88 @@
}
.region_list span:nth-child(3) {
margin-left: 20%;
}
/* 评论 */
.praise {
width: 49%;
display: inline-block;
box-sizing: border-box;
padding: 20px;
}
.makeComplaints {
width: 49%;
float: right;
box-sizing: border-box;
padding: 20px;
}
/* 进度条 */
.comments ul li p{
width: 100%!important;
font-size: 12px;
height: 16px;
line-height: 16px!important;
}
.progessBar {
width: 100%;
height: 6px!important;
background-color: #d6e9f5;
position: relative;
}
.progessBar b {
background: linear-gradient(to right, rgb(245, 246, 250) , rgb(14, 50, 167));
position: absolute;
left: 0;
top: 0;
height: 6px;
}
.progessBar1 {
width: 100%;
height: 6px!important;
background-color: #f1e2e1;
position: relative;
}
.progessBar1 b {
background: linear-gradient(to right, rgb(243, 221, 221) , rgb(255, 145, 145));
position: absolute;
left: 0;
top: 0;
height: 6px;
}
.comments ul li p span{
float: right;
}
/* 评价展示 */
.evaluation_display {
margin: 20px 0;
font-size: 12px;
padding: 0 20px;
height: 370px;
border: 1px solid #dedede;
border-radius: 10px;
overflow: hidden;
}
.evaluation_display li {
padding: 10px 0;
}
.evaluation_display li:not(:last-child) {
border-bottom: 1px solid #dedede;
}
.evaluation_display li p img{
width: 39px;
height: 39px;
border-radius: 50%;
float: left;
}
.evaluation_display li p span {
display: inline-block;
height: 36px;
line-height: 36px;
margin-left: 10px;
}
.evaluation_display li p .date {
float: right;
}
.evaluation_display li p:nth-child(2) {
padding-left: 49px;
color: #8a7979;
}
\ No newline at end of file
......
......@@ -5,6 +5,7 @@ layui.use('element', function () {
$(function () {
addTabs('#evaluate');
fetchDataReviews();
roll()
})
function fetchDataReviews() {
layui.use(['rate'], function () {
......@@ -13,70 +14,88 @@ function fetchDataReviews() {
elem: '#score'
, value: 5 //初始值
, text: false //开启文本
,readonly: true
, readonly: true
});
rate.render({
elem: '#score1'
, value: 4 //初始值
, text: false //开启文本
,readonly: true
, readonly: true
});
rate.render({
elem: '#score2'
, value: 3 //初始值
, text: false //开启文本
,readonly: true
, readonly: true
});
rate.render({
elem: '#score3'
, value: 2 //初始值
, text: false //开启文本
,readonly: true
, readonly: true
});
rate.render({
elem: '#score4'
, value: 1 //初始值
, text: false //开启文本
,readonly: true
, readonly: true
});
// 城区评价
rate.render({
elem: '#grade'
, value: 5 //初始值
, text: false //开启文本
,theme: '#006CFF' //自定义主题色
,readonly: true
, theme: '#006CFF' //自定义主题色
, readonly: true
});// 城区评价
rate.render({
elem: '#grade1'
, value: 5 //初始值
, text: false //开启文本
,theme: '#006CFF' //自定义主题色
,readonly: true
, theme: '#006CFF' //自定义主题色
, readonly: true
});
// 城区评价
rate.render({
elem: '#grade2'
, value: 5 //初始值
, text: false //开启文本
,theme: '#006CFF' //自定义主题色
,readonly: true
, theme: '#006CFF' //自定义主题色
, readonly: true
});
// 城区评价
rate.render({
elem: '#grade3'
, value: 5 //初始值
, text: false //开启文本
,theme: '#006CFF' //自定义主题色
,readonly: true
, theme: '#006CFF' //自定义主题色
, readonly: true
});
// 城区评价
rate.render({
elem: '#grade4'
, value: 5 //初始值
, text: false //开启文本
,theme: '#006CFF' //自定义主题色
,readonly: true
, theme: '#006CFF' //自定义主题色
, readonly: true
});
})
}
// 评价滚动效果
function roll() {
var listPanel = $('.evaluation_display ul');
var nubcers = 0; //向上滚动top值
function up() { //向上滚动
listPanel.animate({ //中奖结果
'top': (nubcers - 35) + 'px'
}, 1000, 'linear', function () {
listPanel.css({
'top': '0px'
})
.find("li:first").appendTo(listPanel);
up();
});
}
up();
}
\ No newline at end of file
......
......@@ -103,14 +103,140 @@
</div>
</div>
<!-- 评论数 -->
<div class="satisfaction">
<div class="satisfaction comments">
<div class="praise cardItem">
<h3>好评TOP5</h3>
<ul>
<li>
<p>
网上综合大厅办理
<span>68798</span>
</p>
<p class="progessBar">
<b style="width: 60%;"></b>
</p>
</li>
<li>
<p>
网上申报反馈
<span>68798</span>
</p>
<p class="progessBar">
<b style="width: 80%;"></b>
</p>
</li>
<li>
<p>
网上综合大厅办理
<span>68798</span>
</p>
<p class="progessBar">
<b style="width: 60%;"></b>
</p>
</li>
<li>
<p>
网上综合大厅办理
<span>68798</span>
</p>
<p class="progessBar">
<b style="width: 60%;"></b>
</p>
</li>
</ul>
</div>
<div class="makeComplaints cardItem">
<h3>吐槽TOP5</h3>
<ul>
<li>
<p>
网上综合大厅办理
<span>68798</span>
</p>
<p class="progessBar1">
<b style="width: 60%;"></b>
</p>
</li>
<li>
<p>
网上申报反馈
<span>68798</span>
</p>
<p class="progessBar1">
<b style="width: 80%;"></b>
</p>
</li>
<li>
<p>
网上综合大厅办理
<span>68798</span>
</p>
<p class="progessBar1">
<b style="width: 60%;"></b>
</p>
</li>
<li>
<p>
网上综合大厅办理
<span>68798</span>
</p>
<p class="progessBar1">
<b style="width: 60%;"></b>
</p>
</li>
</ul>
</div>
</div>
<!-- 评价展示 -->
<div class="evaluation_display">
<ul>
<li>
<p>
<img src="../staticImages/bg.png">
<span>任超1</span>
<span>整体服务：非常满意</span>
<span class="date">2020-10-29</span>
</p>
<p>评价事项：劳动者技能提升培训</p>
</li>
<li>
<p>
<img src="../staticImages/bg.png">
<span>任超2</span>
<span>整体服务：非常满意2222</span>
<span class="date">2020-10-29</span>
</p>
<p>评价事项：劳动者技能提升培训</p>
</li>
<li>
<p>
<img src="../staticImages/bg.png">
<span>任超12121</span>
<span>整体服务：非常满意</span>
<span class="date">2020-10-29</span>
</p>
<p>评价事项：劳动者技能提升培训</p>
</li>
<li>
<p>
<img src="../staticImages/bg.png">
<span>任超78979798</span>
<span>整体服务：非常满意</span>
<span class="date">2020-10-29</span>
</p>
<p>评价事项：劳动者技能提升培训</p>
</li>
<li>
<p>
<img src="../staticImages/bg.png">
<span>任超79879879</span>
<span>整体服务：非常满意</span>
<span class="date">2020-10-29</span>
</p>
<p>评价事项：劳动者技能提升培训</p>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="../staticJs/common.js"></script>
......