Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
bd7d1b5f by 任超
Options

style:样式

1 parent 91df794e
Inline Side-by-side
Showing 6 changed files with 102 additions and 97 deletions
...@@ -14,6 +14,11 @@ ...@@ -14,6 +14,11 @@
14 text-align: center; 14 text-align: center;
15 flex: 1; 15 flex: 1;
16 width: 100%; 16 width: 100%;
17 -moz-user-select: none; /*火狐*/
18 -webkit-user-select: none; /*webkit浏览器*/
19 -ms-user-select: none; /*IE10*/
20 -khtml-user-select: none; /*早期浏览器*/
21 user-select: none;
17 } 22 }
18 .app_progress .layui-progress { 23 .app_progress .layui-progress {
19 flex: 2.1; 24 flex: 2.1;
......
...@@ -22,37 +22,47 @@ ...@@ -22,37 +22,47 @@
22 color: #0091FF; 22 color: #0091FF;
23 } 23 }
24 .audit_progress { 24 .audit_progress {
25 padding: 30px 20px;
26 border: 1px solid #eeeeee;
27 margin: 20px 0; 25 margin: 20px 0;
28 } 26 }
29 .audit_progress h2 { 27 .audit_progress h2 {
30 font-size: 16px; 28 font-size: 16px;
31 font-weight: 600; 29 font-weight: 600;
32 color: #5FB878;
33 line-height: 16px; 30 line-height: 16px;
31 text-align: center;
32 color: #6D7278;
33 }
34 .audit_progress h2 img {
35 width: 24px;
36 height: 24px;
37 position: relative;
38 top: 5px;
34 } 39 }
35 /* ------------缴费信息---------------- */ 40 /* ------------缴费信息---------------- */
36 .payment_information h3, .payment_channel h3{ 41 .payment_information h3, .payment_channel h3{
37 height: 16px; 42 height: 16px;
38 padding-left: 5px; 43 padding-left: 8px;
39 border-left: 3px solid #0091FF;
40 line-height: 18px;
41 font-size: 16px; 44 font-size: 16px;
42 font-weight: 600; 45 font-weight: 600;
43 margin-bottom: 15px; 46 margin-bottom: 15px;
44 } 47 position: relative;
45 .payment_information ul{ 48 border-bottom: 1px dotted #E6E6E6;
46 font-size: 0; 49 padding-bottom: 15px;
47 } 50 }
48 .payment_information ul li{ 51 .payment_information h3::after, .payment_channel h3:after {
52 position:absolute;
53 content:"";
54 left:0;
55 width:4px;
56 height:12px;
57 border-radius: 1px;
58 top: 5px;
59 background-color: #0091FF;
60 }
61
62 .payment_information ul li {
63 width: 49%;
49 display: inline-block; 64 display: inline-block;
50 width: 50%; 65 line-height: 36px;
51 font-size: 14px;
52 line-height: 28px;
53 }
54 .payment_information ul li span {
55 color: #9B9B9B;
56 } 66 }
57 .payment_information ul li p, .payment_information h5 ,.payment_information h6 { 67 .payment_information ul li p, .payment_information h5 ,.payment_information h6 {
58 display: inline-block; 68 display: inline-block;
...@@ -67,64 +77,62 @@ ...@@ -67,64 +77,62 @@
67 } 77 }
68 /* ----------------------缴费通道------------------------------- */ 78 /* ----------------------缴费通道------------------------------- */
69 .payment_channel { 79 .payment_channel {
70 margin: 20px 0; 80 margin-top: 20px;
71 }
72 .payment_channel ul {
73 font-size: 0;
74 } 81 }
75 .payment_channel ul li { 82 .payment_channel .payment_channel_con li {
83 width: 200px;
84 height: 90px;
85 background: #FFFFFF;
86 border-radius: 8px;
87 border: 1px solid #DEDEDE;
76 display: inline-block; 88 display: inline-block;
77 width: 50%;
78 text-align: center; 89 text-align: center;
90 line-height: 90px;
91 margin-right: 15px;
79 cursor: pointer; 92 cursor: pointer;
80 } 93 -moz-user-select: none; /*火狐*/
81 .payment_channel ul li img { 94 -webkit-user-select: none; /*webkit浏览器*/
82 width: 60px; 95 -ms-user-select: none; /*IE10*/
83 height: 60px; 96 -khtml-user-select: none; /*早期浏览器*/
84 } 97 user-select: none;
85 .payment_channel ul li span { 98 }
86 display: block; 99 .payment_channel .payment_channel_con li:hover {
87 text-align: center; 100 border: 1px solid #0091FF;
88 font-size: 16px; 101 background: rgba(47, 165, 255, 0.06);
89 margin-top: 5px; 102 }
90 } 103 .payment_channel .payment_channel_con li img {
91 .code { 104 width: 24px;
92 text-align: center; 105 height: 24px;
93 } 106 display: inline-block;
94 .code img { 107 position: relative;
95 width: 150px; 108 top: 6px;
96 height: 150px; 109 }
97 } 110 .payActive {
98 /* ------------------支付成功----------------------- */ 111 border: 1px solid #0091FF!important;
99 .payment_success h5 { 112 background: rgba(47, 165, 255, 0.06)!important;
113 }
114 /* ----------------------支付成功------------------------------ */
115 .scan_code {
116 -moz-user-select: none; /*火狐*/
117 -webkit-user-select: none; /*webkit浏览器*/
118 -ms-user-select: none; /*IE10*/
119 -khtml-user-select: none; /*早期浏览器*/
120 user-select: none;
121 }
122 .scan_code {
100 text-align: center; 123 text-align: center;
124 margin:30px 0 100px 0;
101 } 125 }
102 .payment_success h5 img { 126 .scan_code p {
103 width: 50px; 127 font-size: 28px;
104 height: 50px;
105 }
106 .payment_success h5 p {
107 text-align: center;
108 font-weight: 600; 128 font-weight: 600;
109 margin-top: 5px; 129 color: #FA6400;
110 }
111 .payment_success ul {
112 margin-top: 20px;
113 width: 236px;
114 line-height: 36px;
115 margin: 0 auto;
116 margin-top: 30px;
117 }
118 .payment_success ul li {
119 text-align: left;
120 }
121 .payment_success ul li span{
122 color: #9B9B9B;
123 } 130 }
124 .payment_success ul li p { 131 .code_detail img {
132 width: 32px;
133 height: 32px;
125 display: inline-block; 134 display: inline-block;
126 } 135 }
127 .next_button { 136 .code_detail ul {
128 text-align: center; 137 display: inline-block;
129 margin: 30px 0 100px 0;
130 } 138 }
...\ No newline at end of file ...\ No newline at end of file
......

7.84 KB | W: | H:

6.03 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -51,4 +51,8 @@ $(function () { ...@@ -51,4 +51,8 @@ $(function () {
51 element.init(); 51 element.init();
52 }); 52 });
53 }); 53 });
54 $('.payment_channel_con li').click(function(){
55 $('.payment_channel_con li').removeClass()
56 $(this).addClass('payActive')
57 })
54 }) 58 })
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -33,7 +33,10 @@ ...@@ -33,7 +33,10 @@
33 </div> 33 </div>
34 <!-- ------------------开始支付----------------- --> 34 <!-- ------------------开始支付----------------- -->
35 <div class="audit_progress"> 35 <div class="audit_progress">
36 <h2>您的申请已提交,工作人员会在15个工作日内完成审核！</h2> 36 <h2>
37 <img src="../staticImages/xuanzhong.png" />
38 您的申请已提交,工作人员会在15个工作日内完成审核！
39 </h2>
37 </div> 40 </div>
38 <!-- ------------------缴费信息----------------- --> 41 <!-- ------------------缴费信息----------------- -->
39 <div class="payment_information"> 42 <div class="payment_information">
...@@ -68,7 +71,7 @@ ...@@ -68,7 +71,7 @@
68 <!-- ------------------缴费通道----------------- --> 71 <!-- ------------------缴费通道----------------- -->
69 <div class="payment_channel"> 72 <div class="payment_channel">
70 <h3>缴费通道</h3> 73 <h3>缴费通道</h3>
71 <ul> 74 <ul class="payment_channel_con">
72 <li> 75 <li>
73 <img src="../staticImages/wechat.png"> 76 <img src="../staticImages/wechat.png">
74 <span>微信</span> 77 <span>微信</span>
...@@ -78,37 +81,22 @@ ...@@ -78,37 +81,22 @@
78 <span>支付宝</span> 81 <span>支付宝</span>
79 </li> 82 </li>
80 </ul> 83 </ul>
81 <div class="code"> 84 <div class="scan_code">
82 <img src="../staticImages/code.png"> 85 <p>600.00</p>
86 <div>
87 <img src="../staticImages/code.png">
88 <div class="code_detail">
89 <img src="../staticImages/saoyisao.png">
90 <ul>
91 <li>打开手机支付宝</li>
92 <li>扫一扫继续付款</li>
93 </ul>
94 </div>
95 </div>
83 </div> 96 </div>
84 </div> 97 </div>
85 98
86 <!-- ------------------支付成功----------------- --> 99 <!-- ------------------支付成功----------------- -->
87 <div class="payment_success">
88 <h5>
89 <img src="../staticImages/success.png">
90 <p>支付成功</p>
91 </h5>
92 <ul>
93 <li>
94 <span>支付流水号：</span>
95 <p>67879798798798</p>
96 </li>
97 <li>
98 <span>支付时间：</span>
99 <p>79879879</p>
100 </li>
101 <li>
102 <span>支付金额：</span>
103 <p>550.00元</p>
104 </li>
105 </ul>
106 <div class="next_button">
107 <button type="button" class="layui-btn layui-btn-normal">
108 <a href="./dzzs.html">下一步</a>
109 </button>
110 </div>
111 </div>
112 </div> 100 </div>
113 </body> 101 </body>
114 <script type="text/javascript" src="../staticJs/common.js"></script> 102 <script type="text/javascript" src="../staticJs/common.js"></script>
...@@ -127,7 +115,7 @@ ...@@ -127,7 +115,7 @@
127 {{# } }} 115 {{# } }}
128 {{# if(item.stepState==1){ }} 116 {{# if(item.stepState==1){ }}
129 <li class="item_proress"> 117 <li class="item_proress">
130 <p class="active"></p> 118 <p class="activeing"></p>
131 <h5>{{item.stepName}}</h5> 119 <h5>{{item.stepName}}</h5>
132 </li> 120 </li>
133 {{# if(index!=(d.progressList.length-1)){ }} 121 {{# if(index!=(d.progressList.length-1)){ }}
......