| 提交 | 用户 | age | ||
| 3ac5f2 | 1 | /*@import "../js/app/toast/toast.css";*/ |
| J | 2 | html{ |
| 3 | -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| 4 | word-break: break-all; | |
| 5 | -webkit-text-size-adjust:none; | |
| 6 | text-size-adjust:none; | |
| 7 | } | |
| 8 | a,address,b,big,blockquote,body,center,cite,code,dd,del,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,label,legend,li,ol,p,pre,small,span,strong,u,ul,var { | |
| 9 | margin: 0; | |
| 10 | padding: 0 | |
| 11 | } | |
| 12 | html,input,textarea,select{font-family: -apple-system-font, Helvetica Neue, Helvetica, STHeiTi, Microsoft Yahei, sans-serif;} | |
| 13 | body{ | |
| 14 | font: 0.8785vw/1.5 arial,Microsoft YaHei,"\u5b8b\u4f53",sans-serif; | |
| 15 | -webkit-font-smoothing: antialiased; | |
| 16 | color: #333; | |
| 17 | background: #f2f2f2; | |
| 18 | } | |
| 19 | a {color: #333;text-decoration: none;} | |
| 20 | ol,ul{list-style: none;} | |
| 21 | .flex { | |
| 22 | display: box; | |
| 23 | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | |
| 24 | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | |
| 25 | display: -ms-flexbox; /* TWEENER - IE 10 */ | |
| 26 | display: -webkit-flex; /* NEW - Chrome */ | |
| 27 | display: -moz-flex; | |
| 28 | display: -ms-flex; | |
| 29 | display: -o-flex; | |
| 30 | display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
| 31 | } | |
| 32 | ||
| 33 | .flex-1 { | |
| 34 | -webkit-box-flex: 1; | |
| 35 | flex: 1; | |
| 36 | -webkit-flex: 1; | |
| 37 | } | |
| cf3e3e | 38 | .flex-1-w1 {width: 1px;} |
| 3ac5f2 | 39 | .w1{width: 0.0732vw;}.h1{height: 0.0732vw;} |
| J | 40 | |
| 41 | .flex-center { | |
| 42 | justify-content: center; | |
| 43 | -webkit-justify-content: center; | |
| 44 | align-items: center; | |
| 45 | -webkit-align-items: center; | |
| 46 | } | |
| aeb317 | 47 | /* 水平居中 */ |
| J | 48 | .flex-align-center{ |
| 49 | justify-content: center; | |
| 50 | -webkit-justify-content: center; | |
| 51 | } | |
| 52 | /* 水平居左 */ | |
| 53 | .flex-align-start{ | |
| 54 | justify-content: start; | |
| 55 | -webkit-justify-content: start; | |
| 56 | } | |
| 57 | /* 水平居右 */ | |
| 58 | .flex-align-end{ | |
| 59 | justify-content: end; | |
| 60 | -webkit-justify-content: end; | |
| 61 | } | |
| 3ac5f2 | 62 | .flex-ver {-webkit-align-items: center;align-items: center;} |
| J | 63 | .flex-col {-webkit-flex-flow: column;flex-flow: column;} |
| 64 | .flex-end{ | |
| 65 | -webkit-justify-content: flex-end; | |
| 66 | justify-content: flex-end; | |
| 67 | } | |
| 68 | ||
| 69 | /* flex 换行 */ | |
| 70 | .flex-wrap { | |
| 71 | flex-wrap: wrap; | |
| 72 | -webkit-flex-wrap: wrap; | |
| 73 | } | |
| 74 | ||
| 75 | /* flex 容器（设置为flex）内子元素向两边顶齐平分 */ | |
| 76 | .flex-sb { | |
| 77 | justify-content: space-between; | |
| 78 | -webkit-justify-content: space-between; | |
| 79 | } | |
| 80 | ||
| 81 | /* flex 容器（设置为flex）内子元素向两边平分 */ | |
| 82 | .flex-sa { | |
| 83 | justify-content: space-around; | |
| 84 | -webkit-justify-content: space-around; | |
| 85 | } | |
| 86 | ||
| 87 | /* 容器（设置为flex）内子元素靠最后对齐（水平时比较像右浮动） */ | |
| 88 | .flex-jcfe { | |
| 89 | justify-content: flex-end; | |
| 90 | -webkit-justify-content: flex-end; | |
| 91 | } | |
| 92 | ||
| 93 | /* 容器（设置为flex）内子元素靠最前对齐（水平时比较像左浮动） */ | |
| 94 | .flex-jcfs { | |
| 95 | justify-content: flex-start; | |
| 96 | -webkit-justify-content: flex-start; | |
| 97 | } | |
| 98 | ||
| 99 | /* 容器（设置为flex）内子元素等高 */ | |
| 100 | .flex-ais { | |
| 101 | align-items: stretch; | |
| 102 | -webkit-align-items: stretch; | |
| 103 | } | |
| 104 | ||
| 105 | /* 容器（设置为flex）内子元素置底 */ | |
| 106 | .flex-aife { | |
| 107 | align-items: flex-end; | |
| 108 | -webkit-align-items: flex-end; | |
| 109 | } | |
| 110 | ||
| 111 | .ell{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} | |
| 112 | .wsnw{white-space: nowrap;} | |
| 113 | ||
| 114 | input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ | |
| 115 | color: #999; | |
| 116 | } | |
| 117 | /* css arrow */ | |
| 118 | .arrow{ | |
| 119 | display: inline-block; | |
| 120 | border: solid #29262A; | |
| 121 | border-width: 0.0732vw 0.0732vw 0 0; | |
| 122 | } | |
| 123 | .ar-h24{width: 0.6589vw;height: 0.6589vw;} | |
| 124 | .ar-h20{width: 0.5124vw;height: 0.5124vw;} | |
| 125 | .arrow-right{-webkit-transform: rotate(45deg);transform: rotate(45deg);} | |
| 126 | .arrow-down{-webkit-transform: rotate(135deg) translate(-0.1464vw,0.1464vw);transform: rotate(135deg) translate(-0.1464vw,0.1464vw);} | |
| 127 | .ac{text-align: center;}.ar{text-align: right;} | |
| 128 | .hide{display: none!important;} | |
| 129 | ||
| 130 | input::-webkit-outer-spin-button, | |
| 131 | input::-webkit-inner-spin-button { | |
| 132 | -webkit-appearance: none; | |
| 133 | } | |
| 134 | input[type="number"]{ | |
| 135 | -moz-appearance: textfield; | |
| 136 | } | |
| 137 | /*page common*/ | |
| 138 | ||
| 139 | .w{ | |
| 140 | width: 93.7042vw; | |
| 141 | margin: 0 auto; | |
| 142 | } | |
| 143 | .fl{float: left} | |
| 144 | .fr{float: right} | |
| 145 | .al{text-align: left;}.ar{text-align: right;} | |
| 146 | .tdu{text-decoration: underline;} | |
| 147 | .clear,.clr,.clearfix:after { | |
| 148 | content: ''; | |
| 149 | display: block; | |
| 150 | overflow: hidden; | |
| 151 | clear: both; | |
| 152 | height: 0; | |
| 153 | line-height: 0; | |
| 154 | font-size: 0; | |
| 155 | } | |
| 156 | .blue{color: #0084e6;} | |
| 157 | /* 浅色#23a9fd 中间#218ad9 深色#005bbd */ | |
| 158 | .gray{color: #666;}.g4{color: #444;} | |
| 159 | .red{color: red;}.green{color: green;} | |
| 160 | .orange{color: #FC6621;} | |
| 161 | .vm{vertical-align: middle;} | |
| 162 | .ml20{margin-left: 1.4641vw;} | |
| 163 | .fs16{font-size: 1.1713vw;} | |
| 164 | ||
| 165 | /* ====================================================================== */ | |
| 166 | .fs20{font-size:1.4641vw} | |
| 167 | html, body{ | |
| 168 | min-height: 100%; | |
| 169 | } | |
| 170 | body{ | |
| 171 | height: 100%; | |
| 172 | /* background: #000; */ | |
| 173 | -webkit-text-size-adjust: 100% !important; | |
| 174 | text-size-adjust: 100% !important; | |
| 175 | -moz-text-size-adjust: 100% !important; | |
| 176 | } | |
| 177 | #app{ | |
| 178 | user-select: none; | |
| 179 | -webkit-user-select: none; | |
| 180 | /* width: 100vw; | |
| 181 | height: 100vh; | |
| 182 | background: url(../imgs/bg.jpg) no-repeat; | |
| 183 | background-size: 100% 100%; | |
| 184 | min-height: 88.1406vw; */ | |
| 185 | } | |
| 186 | /* .appContainer{ | |
| 187 | position: relative;width: 100%; | |
| 188 | min-height: 88.1406vw; | |
| 189 | } */ | |
| 190 | ||
| 191 | /* 遮罩 */ | |
| 192 | .mask{ | |
| 193 | position: fixed; | |
| 194 | top: 0; | |
| 195 | left: 0; | |
| 196 | right: 0; | |
| 197 | bottom: 0; | |
| 198 | z-index: 10; | |
| bb2b08 | 199 | background: rgba(0,0,0,0.67); |
| 3ac5f2 | 200 | } |
| J | 201 | body{ |
| 202 | overflow: hidden; | |
| 203 | } | |
| 204 | /* 页面通用样式 */ | |
| 205 | .page { | |
| 206 | width: 100vw; | |
| 207 | height: 100vh; | |
| bb2b08 | 208 | /* width: 1440px; |
| J | 209 | height: 900px; */ |
| 3ac5f2 | 210 | background-color: rgba(34,123,235,1); |
| J | 211 | box-sizing: border-box; |
| 212 | padding: 0 23px 42px 23px; | |
| 213 | } | |
| 878885 | 214 | /* 避免Chrome浏览器看到Safari黑客 */ |
| J | 215 | @supports (-webkit-touch-callout: none) { |
| 216 | .page { | |
| 217 | /* The hack for Safari */ | |
| 218 | /* height: -webkit-fill-available; */ | |
| 219 | /* height: -webkit-fill-available; */ | |
| 220 | } | |
| 221 | } | |
| 3ac5f2 | 222 | .page_header { |
| 878885 | 223 | height: 100px; |
| 3ac5f2 | 224 | } |
| J | 225 | |
| 6da3c1 | 226 | .page_header .left { |
| J | 227 | cursor: pointer; |
| 228 | } | |
| 229 | ||
| 3ac5f2 | 230 | .page_logo_1 { |
| J | 231 | width: 50px; |
| 232 | height: 45px; | |
| 233 | display: block; | |
| 234 | } | |
| 878885 | 235 | .page_logo_1 .img { |
| J | 236 | width: 100%; |
| 237 | height: 100%; | |
| 238 | } | |
| 3ac5f2 | 239 | .page_logo_2 { |
| J | 240 | width: 132px; |
| 241 | height: 50px; | |
| 242 | display: block; | |
| 243 | margin-left: 10px; | |
| 244 | } | |
| 878885 | 245 | .page_logo_2 .img { |
| J | 246 | width: 100%; |
| 247 | height: 100%; | |
| 248 | } | |
| 3ac5f2 | 249 | .page_date { |
| J | 250 | line-height: 28px; |
| 251 | color: rgba(255,255,255,1); | |
| 252 | font-size: 20px; | |
| 253 | font-family: PingFangSC-regular; | |
| 254 | text-align: right; | |
| bb2b08 | 255 | margin-left: 33px; |
| 3ac5f2 | 256 | } |
| J | 257 | |
| 258 | .page_week {} | |
| 259 | ||
| 260 | .page_day {} | |
| 261 | ||
| 262 | .page_time { | |
| 263 | line-height: 75px; | |
| 264 | color: rgba(255,255,255,1); | |
| 265 | font-size: 54px; | |
| 266 | font-family: PingFangSC-regular; | |
| 267 | margin-left: 15px; | |
| 268 | text-align: right; | |
| 269 | } | |
| 270 | ||
| 271 | .page_container { | |
| 272 | width: 100%; | |
| bb2b08 | 273 | } |
| J | 274 | |
| 275 | .btn_ani { | |
| 276 | animation-name: anim_scale; | |
| 277 | animation-duration: 1.1s; | |
| 278 | animation-iteration-count: infinite; | |
| 279 | } | |
| 280 | ||
| 281 | @keyframes anim_scale { | |
| 282 | 0% { | |
| 283 | scale: 1; | |
| 284 | } | |
| 285 | 50% { | |
| 878885 | 286 | scale: 1.1; |
| bb2b08 | 287 | } |
| J | 288 | 100% { |
| 289 | scale: 1; | |
| 290 | } | |
| 3ac5f2 | 291 | } |
