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
1 .evaluate { 1 .evaluate {
2 width: 1200px; 2 width: 1200px;
3 margin: 0 auto; 3 margin: 0 auto;
4 overflow: auto;
4 } 5 }
5 .evaluate_nav { 6 .evaluate_nav {
6 font-size: 0; 7 font-size: 0;
...@@ -99,3 +100,87 @@ ...@@ -99,3 +100,87 @@
99 .region_list span:nth-child(3) { 100 .region_list span:nth-child(3) {
100 margin-left: 20%; 101 margin-left: 20%;
101 } 102 }
103 /* 评论 */
104 .praise {
105 width: 49%;
106 display: inline-block;
107 box-sizing: border-box;
108 padding: 20px;
109 }
110 .makeComplaints {
111 width: 49%;
112 float: right;
113 box-sizing: border-box;
114 padding: 20px;
115 }
116 /* 进度条 */
117 .comments ul li p{
118 width: 100%!important;
119 font-size: 12px;
120 height: 16px;
121 line-height: 16px!important;
122 }
123 .progessBar {
124 width: 100%;
125 height: 6px!important;
126 background-color: #d6e9f5;
127 position: relative;
128 }
129 .progessBar b {
130 background: linear-gradient(to right, rgb(245, 246, 250) , rgb(14, 50, 167));
131 position: absolute;
132 left: 0;
133 top: 0;
134 height: 6px;
135 }
136 .progessBar1 {
137 width: 100%;
138 height: 6px!important;
139 background-color: #f1e2e1;
140 position: relative;
141 }
142 .progessBar1 b {
143 background: linear-gradient(to right, rgb(243, 221, 221) , rgb(255, 145, 145));
144 position: absolute;
145 left: 0;
146 top: 0;
147 height: 6px;
148 }
149 .comments ul li p span{
150 float: right;
151 }
152 /* 评价展示 */
153 .evaluation_display {
154 margin: 20px 0;
155 font-size: 12px;
156 padding: 0 20px;
157 height: 370px;
158 border: 1px solid #dedede;
159 border-radius: 10px;
160 overflow: hidden;
161 }
162 .evaluation_display li {
163 padding: 10px 0;
164 }
165 .evaluation_display li:not(:last-child) {
166 border-bottom: 1px solid #dedede;
167 }
168 .evaluation_display li p img{
169 width: 39px;
170 height: 39px;
171 border-radius: 50%;
172 float: left;
173 }
174 .evaluation_display li p span {
175 display: inline-block;
176 height: 36px;
177 line-height: 36px;
178 margin-left: 10px;
179 }
180 .evaluation_display li p .date {
181 float: right;
182 }
183 .evaluation_display li p:nth-child(2) {
184 padding-left: 49px;
185 color: #8a7979;
186 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,6 +5,7 @@ layui.use('element', function () { ...@@ -5,6 +5,7 @@ layui.use('element', function () {
5 $(function () { 5 $(function () {
6 addTabs('#evaluate'); 6 addTabs('#evaluate');
7 fetchDataReviews(); 7 fetchDataReviews();
8 roll()
8 }) 9 })
9 function fetchDataReviews() { 10 function fetchDataReviews() {
10 layui.use(['rate'], function () { 11 layui.use(['rate'], function () {
...@@ -13,70 +14,88 @@ function fetchDataReviews() { ...@@ -13,70 +14,88 @@ function fetchDataReviews() {
13 elem: '#score' 14 elem: '#score'
14 , value: 5 //初始值 15 , value: 5 //初始值
15 , text: false //开启文本 16 , text: false //开启文本
16 ,readonly: true 17 , readonly: true
17 }); 18 });
18 rate.render({ 19 rate.render({
19 elem: '#score1' 20 elem: '#score1'
20 , value: 4 //初始值 21 , value: 4 //初始值
21 , text: false //开启文本 22 , text: false //开启文本
22 ,readonly: true 23 , readonly: true
23 }); 24 });
24 rate.render({ 25 rate.render({
25 elem: '#score2' 26 elem: '#score2'
26 , value: 3 //初始值 27 , value: 3 //初始值
27 , text: false //开启文本 28 , text: false //开启文本
28 ,readonly: true 29 , readonly: true
29 }); 30 });
30 rate.render({ 31 rate.render({
31 elem: '#score3' 32 elem: '#score3'
32 , value: 2 //初始值 33 , value: 2 //初始值
33 , text: false //开启文本 34 , text: false //开启文本
34 ,readonly: true 35 , readonly: true
35 }); 36 });
36 rate.render({ 37 rate.render({
37 elem: '#score4' 38 elem: '#score4'
38 , value: 1 //初始值 39 , value: 1 //初始值
39 , text: false //开启文本 40 , text: false //开启文本
40 ,readonly: true 41 , readonly: true
41 }); 42 });
42 // 城区评价 43 // 城区评价
43 rate.render({ 44 rate.render({
44 elem: '#grade' 45 elem: '#grade'
45 , value: 5 //初始值 46 , value: 5 //初始值
46 , text: false //开启文本 47 , text: false //开启文本
47 ,theme: '#006CFF' //自定义主题色 48 , theme: '#006CFF' //自定义主题色
48 ,readonly: true 49 , readonly: true
49 });// 城区评价 50 });// 城区评价
50 rate.render({ 51 rate.render({
51 elem: '#grade1' 52 elem: '#grade1'
52 , value: 5 //初始值 53 , value: 5 //初始值
53 , text: false //开启文本 54 , text: false //开启文本
54 ,theme: '#006CFF' //自定义主题色 55 , theme: '#006CFF' //自定义主题色
55 ,readonly: true 56 , readonly: true
56 }); 57 });
57 // 城区评价 58 // 城区评价
58 rate.render({ 59 rate.render({
59 elem: '#grade2' 60 elem: '#grade2'
60 , value: 5 //初始值 61 , value: 5 //初始值
61 , text: false //开启文本 62 , text: false //开启文本
62 ,theme: '#006CFF' //自定义主题色 63 , theme: '#006CFF' //自定义主题色
63 ,readonly: true 64 , readonly: true
64 }); 65 });
65 // 城区评价 66 // 城区评价
66 rate.render({ 67 rate.render({
67 elem: '#grade3' 68 elem: '#grade3'
68 , value: 5 //初始值 69 , value: 5 //初始值
69 , text: false //开启文本 70 , text: false //开启文本
70 ,theme: '#006CFF' //自定义主题色 71 , theme: '#006CFF' //自定义主题色
71 ,readonly: true 72 , readonly: true
72 }); 73 });
73 // 城区评价 74 // 城区评价
74 rate.render({ 75 rate.render({
75 elem: '#grade4' 76 elem: '#grade4'
76 , value: 5 //初始值 77 , value: 5 //初始值
77 , text: false //开启文本 78 , text: false //开启文本
78 ,theme: '#006CFF' //自定义主题色 79 , theme: '#006CFF' //自定义主题色
79 ,readonly: true 80 , readonly: true
80 }); 81 });
81 }) 82 })
82 } 83 }
84
85 // 评价滚动效果
86 function roll() {
87 var listPanel = $('.evaluation_display ul');
88 var nubcers = 0; //向上滚动top值
89 function up() { //向上滚动
90 listPanel.animate({ //中奖结果
91 'top': (nubcers - 35) + 'px'
92 }, 1000, 'linear', function () {
93 listPanel.css({
94 'top': '0px'
95 })
96 .find("li:first").appendTo(listPanel);
97 up();
98 });
99 }
100 up();
101 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -103,14 +103,140 @@ ...@@ -103,14 +103,140 @@
103 </div> 103 </div>
104 </div> 104 </div>
105 <!-- 评论数 --> 105 <!-- 评论数 -->
106 <div class="satisfaction"> 106 <div class="satisfaction comments">
107 <div class="praise cardItem"> 107 <div class="praise cardItem">
108 108 <h3>好评TOP5</h3>
109 <ul>
110 <li>
111 <p>
112 网上综合大厅办理
113 <span>68798</span>
114 </p>
115 <p class="progessBar">
116 <b style="width: 60%;"></b>
117 </p>
118 </li>
119 <li>
120 <p>
121 网上申报反馈
122 <span>68798</span>
123 </p>
124 <p class="progessBar">
125 <b style="width: 80%;"></b>
126 </p>
127 </li>
128 <li>
129 <p>
130 网上综合大厅办理
131 <span>68798</span>
132 </p>
133 <p class="progessBar">
134 <b style="width: 60%;"></b>
135 </p>
136 </li>
137 <li>
138 <p>
139 网上综合大厅办理
140 <span>68798</span>
141 </p>
142 <p class="progessBar">
143 <b style="width: 60%;"></b>
144 </p>
145 </li>
146 </ul>
109 </div> 147 </div>
110 <div class="makeComplaints cardItem"> 148 <div class="makeComplaints cardItem">
111 149 <h3>吐槽TOP5</h3>
150 <ul>
151 <li>
152 <p>
153 网上综合大厅办理
154 <span>68798</span>
155 </p>
156 <p class="progessBar1">
157 <b style="width: 60%;"></b>
158 </p>
159 </li>
160 <li>
161 <p>
162 网上申报反馈
163 <span>68798</span>
164 </p>
165 <p class="progessBar1">
166 <b style="width: 80%;"></b>
167 </p>
168 </li>
169 <li>
170 <p>
171 网上综合大厅办理
172 <span>68798</span>
173 </p>
174 <p class="progessBar1">
175 <b style="width: 60%;"></b>
176 </p>
177 </li>
178 <li>
179 <p>
180 网上综合大厅办理
181 <span>68798</span>
182 </p>
183 <p class="progessBar1">
184 <b style="width: 60%;"></b>
185 </p>
186 </li>
187 </ul>
112 </div> 188 </div>
113 </div> 189 </div>
190 <!-- 评价展示 -->
191 <div class="evaluation_display">
192 <ul>
193 <li>
194 <p>
195 <img src="../staticImages/bg.png">
196 <span>任超1</span>
197 <span>整体服务：非常满意</span>
198 <span class="date">2020-10-29</span>
199 </p>
200 <p>评价事项：劳动者技能提升培训</p>
201 </li>
202 <li>
203 <p>
204 <img src="../staticImages/bg.png">
205 <span>任超2</span>
206 <span>整体服务：非常满意2222</span>
207 <span class="date">2020-10-29</span>
208 </p>
209 <p>评价事项：劳动者技能提升培训</p>
210 </li>
211 <li>
212 <p>
213 <img src="../staticImages/bg.png">
214 <span>任超12121</span>
215 <span>整体服务：非常满意</span>
216 <span class="date">2020-10-29</span>
217 </p>
218 <p>评价事项：劳动者技能提升培训</p>
219 </li>
220 <li>
221 <p>
222 <img src="../staticImages/bg.png">
223 <span>任超78979798</span>
224 <span>整体服务：非常满意</span>
225 <span class="date">2020-10-29</span>
226 </p>
227 <p>评价事项：劳动者技能提升培训</p>
228 </li>
229 <li>
230 <p>
231 <img src="../staticImages/bg.png">
232 <span>任超79879879</span>
233 <span>整体服务：非常满意</span>
234 <span class="date">2020-10-29</span>
235 </p>
236 <p>评价事项：劳动者技能提升培训</p>
237 </li>
238 </ul>
239 </div>
114 </div> 240 </div>
115 </body> 241 </body>
116 <script type="text/javascript" src="../staticJs/common.js"></script> 242 <script type="text/javascript" src="../staticJs/common.js"></script>
......