css - 公众号样式

 /*
  * @Author: WJ_LONG
  * @Date: 2018-09-06 15:32:06
  * @Last Modified by: WJ_LONG
  * @Last Modified time: 2018-09-07 16:18:09
  * @animation-display-address：https://daneden.github.io/animate.css/ || http://ianlunn.github.io/Hover/
  * @Use 公众号
  */

 @charset "utf-8";
 /*

 这里可以用import导入各种库....

 例如：import "./animate.min.css";

 */

 * {
   box-sizing: border-box;
 }

 a {
   color: #2d374b;
   text-decoration: none
 }

 a:hover {
   color: #cd0200;
   text-decoration: underline
 }

 em {
   font-style: normal
 }

 li {
   list-style: none
 }

 img {
   border:;
   vertical-align: middle
 }

 table {
   border-collapse: collapse;
   border-spacing: 0
 }

 p {
   word-wrap: break-word
 }

 /* 文字 */

 .t-white {
   color: #fff;
 }

 .t-black {
   color: #000;
 }

 .t-blue {
   color: #0E639C;
 }

 .t-red {
   color: #DD4F43;
 }

 .t-green {
   color: #1AA15F;
 }

 .t-yellow {
   color: #FFCD42;
 }

 .t-orange {
   color: #f18518;
 }

 .t-bold {
   font-weight: bold;
 }

 .t-left {
   text-align: left;
 }

 .t-center {
   text-align: center;
 }

 .t-right {
   text-align: right;
 }

 /* 文字换行与不换行 */

 .n-word {
   word-break: break-all;
 }

 .no-word {
   word-break: nowrap;
 }

 /* 背景 */

 .bg-blue {
   background-color: #038dd8;
 }

 .bg-green {
   background-color: #009b4d;
 }

 .bg-yellow {
   background-color: #fdd100;
 }

 .bg-orange {
   background-color: #f18518;
 }

 .bg-red {
   background-color: #d22a31;
 }

 /* 图标 > */

 .icon-direction {
   width: 1.2em;
   height: 1.2em;
   padding:;
   margin:;
   border: 1px solid #000;
   border-top: none;
   border-left: none;
   transform: rotate(-45deg);
 }

 /* 遮罩层-垂直居中 */

 .ab-center {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top:;
   bottom:;
   left:;
   right:;
   background-color: rgba(0, 0, 0, .7);
 }

 /* 美化input */

 /* <div class="beautiful">
 <div class="radio">
     <input type="radio" name="Storage" id="model1" checked/>
     <label for="model1">iPhone 6s</label>
     <input type="radio" name="Storage" id="model2" />
     <label for="model2">iPhone 6s Plus</label>
     <input type="radio" name="Storage" id="model3" />
     <label for="model3">iPhone 7</label>
     <input type="radio" name="Storage" id="model4" />
     <label for="model4">iPhone 7 Plus</label>
 </div>

 <br>

 <div class="checkbox">
     <input type="checkbox" id="love1" />
     <label for="love1">女</label>
     <input type="checkbox" id="love2" />
     <label for="love2">绘画</label>
     <input type="checkbox" id="love3" />
     <label for="love3">摄影</label>
     <input type="checkbox" id="love4" checked />
     <label for="love4">骑行</label>
 </div>
 </div> */

 .beautiful input {
   display: none
 }

 .beautiful label {
   border: 1px solid #00a4ff;
   padding: 2px 10px 2px 5px;
   line-height: 28px;
   min-width: 80px;
   text-align: center;
   float: left;
   margin: 2px;
   border-radius: 4px
 }

 .beautiful input:checked+label {
   background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MiA0MiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwMGE0ZmYiIGQ9Ik00MiA0MlYuNUwuNSA0MnoiLz48cGF0aCBkPSJNMTkuNCAyNi45bDguNSA4LjUtMi45IDIuOC04LjUtOC41IDIuOS0yLjh6bTE3LTUuN2wyLjggMi44LTE0LjEgMTQuMi0yLjgtMi44IDE0LjEtMTQuMnoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=) no-repeat right bottom;
   background-size: 21px 21px;
   color: #00a4ff;
 }

 .beautiful .radio, .beautiful .checkbox {
   height: 2em;
 }

 /* tab选项卡 */

 /* tab选项卡示例代码 */

 /* <ul class="tabs t-white">
 <li>
     <input type="radio" name="tabs" id="tab1" checked />
     <label for="tab1" class="bg-green">导航1</label>
     <div id="tab-content1" class="tab-content bg-green">
         <p>选项卡内容 1fd;lafklsakfldskflaksldfklsa</p>
     </div>
 </li>

 <li>
     <input type="radio" name="tabs" id="tab2" />
     <label for="tab2">导出2</label>
     <div id="tab-content2" class="tab-content bg-green">
         <p>选项卡内容211f2dsa1f2sa1df2sa1fdsa2fsafdsfsafdsa</p>
     </div>
 </li>

 </ul> */

 .tabs {
   width: 100%;
   float: none;
   list-style: none;
   position: relative;
 }

 .tabs li {
   float: left;
   width: calc(100%/2);
   margin-top: -1%;
   text-align: center;
 }

 .tabs input[type="radio"] {
   position: absolute;
   left: -9999px;
 }

 .tabs label {
   display: block;
   padding: 1.5em;
   border-radius: 2px 2px 0 0;
   font-weight: normal;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   background-color: #009b4d;
   position: relative;
   top: .35em;
 }

 .tabs label:hover {
   background-color: #017b3e;
 }

 .tabs .tab-content {
   z-index:;
   display: none;
   overflow: hidden;
   width: 100%;
   padding: 25px;
   background-color: #009b4d;
   position: absolute;
   top:;
   left:;
 }

 .tabs [id^="tab"]:checked+label {
   background-color: #017b3e;
 }

 .tabs [id^="tab"]:checked~[id^="tab-content"] {
   display: block;
   text-align: left;
 }

 /* 表格示例代码 */

 /* <div class='table'>
   <div class='tr'>
       <div class='th th1'>视频</div>
       <div class='th th2'>游戏</div>
       <div class='th th3'>电视</div>

   </div>

   <div class='tr'>
       <div class='td td1'>1</div>
       <div class='td td2'>2</div>
       <div class='td td3'>3</div>
   </div>

   <div class='tr'>
       <div class='td td1'>1</div>
       <div class='td td2'>2</div>
       <div class='td td3'>3</div>
   </div>

   <div class='tr'>
       <div class='td td1'>1</div>
       <div class='td td2'>2</div>
       <div class='td td3'>3</div>
   </div>
 </div> */

 .table {
   width: 100%;
 }

 .tr {
   width: 100%;
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #dadada;
 }

 .tr .th1 {
   background-color: #008bd5;
 }

 .tr .th2 {
   background-color: #ee8236;
 }

 .tr .th3 {
   background-color: #a40081;
 }

 .th, .td {
   padding: 10px;
   text-align: center;
   width: 100%;
 }

 .th {
   background-color: #000;
   font-size: 1.2em;
   color: #fff;
 }

 .td {
   font-size: 0.9em;
   color: #000;
 }

 .td1, .td2, .td3 {
   word-break: break-all;
   white-space: normal;
 }

 /* 边框 */

 .border-top {
   border-top: 1px solid #000;
 }

 .border-right {
   border-right: 1px solid #000;
 }

 .border-bottom {
   border-bottom: 1px solid #000;
 }

 .border-left {
   border-left: 1px solid #000;
 }

 .border {
   border: 1px solid #000;
 }

 /* 显示-隐藏 */

 .none {
   display: none;
 }

 .display {
   display: block;
 }

 .none-force {
   display: none !important;
 }

 /* 阴影(外部、内部阴影) */

 .b-shadow {
   box-shadow: #fdd000 0 0 10px;
 }

 .t-shadow {
   text-shadow: #ec350c 0 0 20px;
 }

 /* 宽度 */

 .w-100per {
   width: 100%;
 }

 .w-50per {
   width: 50%;
 }

 .h-100per {
   height: 100%;
 }

 .w-100vh {
   width: 100vh;
 }

 .h-100vh {
   width: 100vh;
 }

 /* 用户头像大小 */

 .u-80 {
   height: 80rpx;
   width: 80rpx;
 }

 .u-50 {
   height: 50rpx;
   width: 50rpx;
 }

 /* 圆角 */

 .b-radius-50per {
   border-radius: 50%;
 }

 .b-radius-10 {
   border-radius: 10px;
 }

 /*
   前三分为：中、开始(默认),结束
  */

 .f {
   display: flex;
 }

 .f-center {
   justify-content: center;
 }

 .f-start {
   justify-content: flex-start;
 }

 .f-end {
   justify-content: flex-end;
 }

 .f-s-b {
   justify-content: space-between;
 }

 .f-s-a {
   justify-content: space-around;
 }

 .f-no-wrap {
   flex-wrap: nowrap;
 }

 .f-wrap {
   flex-wrap: wrap;
 }

 /*
   垂直居中(针对view先的元素 - align)
 */

 .f-align-c {
   align-items: center;
 }

 .f-align-s {
   align-items: flex-start;
 }

 .f-align-e {
   align-items: flex-end;
 }

 .f-algin-b {
   align-items: baseline;
 }

 .f-align-stretch {
   align-items: stretch;
 }

 /* line-block 和 inline */

 .i-line {
   display: inline;
 }

 .i-block {
   display: inline-block;
 }

 .block {
   display: block;
 }

 /* 定位 */

 .p-r {
   position: relative;
 }

 .p-s {
   position: absolute;
 }

 .p-f {
   position: fixed;
 }

 .over-flow {
   overflow: hidden;
 }

 /* 内边距 */

 .p-2per {
   padding: 2%;
 }

 .p-l-2per {
   padding-left: 2%;
 }

 .p-r-2per {
   padding-right: 2%;
 }

 .p-t-2per {
   padding-top: 2%;
 }

 .p-b-2per {
   padding-bottom: 2%;
 }

 /* 外边距 */

 .m-2per {
   padding: 2%;
 }

 .m-tb-2per {
   margin: 2% 0;
 }

 .m-lr-2per {
   margin: 0 2%;
 }

 .m-l-2per {
   padding-left: 2%;
 }

 .m-r-2per {
   padding-right: 2%;
 }

 .m-t-2per {
   padding-top: 2%;
 }

 .p-b-2per {
   padding-bottom: 2%;
 }