淘寶雙十一頁面（Flexible）demo

時間 2019-11-19
標籤淘寶雙十頁面 flexible demo 欄目 Flex 简体版
原文原文鏈接
下面的代碼是看了大漠使用Flexible實現手淘H5頁面的終端適配作的一個demo。javascript
  1 <!DOCTYPE html>
  2 <html lang="en" ng-app="sections">
  3     <head>
  4         <meta charset="utf-8">
  5         <meta content="yes" name="apple-mobile-web-app-capable">
  6         <meta content="yes" name="apple-touch-fullscreen">
  7         <meta content="telephone=no,email=no" name="format-detection">
  8         <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  9         <title>雙十一demo(Flexible)</title>
 10         <style type="text/css">
 11             /*reset*/
 12             *{
 13                 margin:0;
 14                 padding:0;
 15             }
 16             html{
 17                 box-sizing: border-box;
 18             }
 19             body{
 20                 max-width:10.0rem;
 21                 margin:0 auto;
 22                 overflow:hidden;
 23             }
 24             ul,li{
 25                 list-style:none;
 26             }
 27             /*font-size*/
 28             div {
 29                 font-size:12px;
 30             }
 31             [data-dpr="2"] div{
 32                 font-size:24px;
 33             }
 34             [data-dpr="3"] div{
 35                 font-size:36px;
 36             }
 37             .font14{
 38                 font-size:14px;
 39             }
 40             [data-dpr="2"] .font14{
 41                 font-size:28px;
 42             }
 43             [data-dpr="3"] .font14{
 44                 font-size:42px;
 45             }
 46 
 47             .font16{
 48                 font-size: 16px;
 49             }
 50             [data-dpr="2"] .font16{
 51                 font-size: 32px;
 52             }
 53             [data-dpr="3"] .font16{
 54                 font-size: 48px;
 55             }
 56 
 57             .font18{
 58                 font-size: 18px;
 59             }
 60             [data-dpr="2"] .font18{
 61                 font-size: 36px;
 62             }
 63             [data-dpr="3"] .font18{
 64                 font-size: 54px;
 65             }
 66 
 67             .font20{
 68                 font-size: 20px;
 69             }
 70             [data-dpr="2"] .font20{
 71                 font-size: 40px;
 72             }
 73             [data-dpr="3"] .font20{
 74                 font-size: 60px;
 75             }
 76 
 77             /*activity*/
 78             .act-wrap{
 79                 position: absolute;
 80                 top: 0;
 81                 right: 0;
 82                 bottom: 0;
 83                 left: 0;
 84                 background-color: #f5294c;
 85                 overflow-y: auto;
 86                 padding-bottom: 0.133333rem;
 87             }
 88             .act-header{
 89                 width:10.0rem;
 90                 height:6.533333rem;
 91             }
 92             .act-con li{
 93                 position:relative;
 94                 margin:0 0.133333rem 1px 0.133333rem;
 95                 background-color:#fff;
 96             }
 97             .clearfix:after{
 98                 content: "";
 99                 clear:both;
100                 display:table;
101             }
102             .figure{
103                 margin-top:0.16rem;
104                 margin-bottom:0.16rem;
105                 width:2.346667rem;
106                 height:2.346667rem;
107                 float:left;
108                 background-color:#6d91cf;
109             }
110             .figcaption{
111                 margin-left:2.56rem;
112                 padding-top:0.16rem;
113             }
114             .title{
115                 height:1.2rem;
116                 overflow:hidden;
117             }
118             .title a{
119                 color:#000;
120             }
121             .price{
122                 padding-top:0.133333rem;
123                 padding-bottom:0.133333rem;
124             }
125             .price span{
126                 display:inline-block;
127                 padding:0.053333rem 0.08rem;
128                 background-color:#f5294c;
129                 color:#fff;
130                 text-align:center;
131                 border-radius:2px;
132                 vertical-align:middle;
133             }
134             .price strong{
135                 color:#f5294c;
136                 vertical-align:middle;
137             }
138             .price small{
139                 color:#f5294c;
140                 vertical-align:middle;
141             }
142             .type{
143                 color:#fd5100;
144             }
145             .btn{
146                 position:absolute;
147                 padding:0.06667rem 0.26667rem;
148                 text-align:center;
149                 background-color:#f5294c;
150                 color:#fff;
151                 right:0.2rem;
152                 bottom:0.2rem;
153                 border-radius:2px;
154             }
155         </style>
156     </head>
157     <body>
158         <div class="act-wrap" ng-controller="activityctrl">
159             <div class="act-header">
160                 <img src="{{activity.sections[0].brannerimg}}" alt="">
161             </div>
162             <ul class="act-con">
163                 <li class="item" ng-repeat="item in activity.sections[0].items">
164                     <div class="clearfix">
165                         <a class="figure" href="{{item.link}}">
166                             <img src="{{item.imgsrc}}">
167                         </a>
168                         <div class="figcaption">
169                             <div class="title font16"><a href="">{{item.poductname}}</a></div>
170                             <div class="price">
171                                 <span class="font14">{{item.activitydate}}</span>
172                                 <strong class="font20">¥{{item.price}}</strong>
173                                 <small class="font14">{{item.preferential}}</small>
174                             </div>
175                             <div class="type font16">{{item.activitytype}}</div>
176                             <a class="btn font16">{{item.activityname}}</a>
177                         </div>
178                     </div>
179                 </li>
180             </ul>
181         </div>
182         <script type="text/javascript" src="js/Angular.js"></script>
183         <script type="text/javascript">
184         (function(){
185             var app = angular.module('sections',[]);
186             app.controller('activityctrl',['$scope',function($scope){
187                 $scope.activity = activity;
188                 }
189             ]);
190             var activity = {
191                 sections:[{
192                     "brannerimg":"##",
193                     items:[{
194                         "link":"##",
195                         "imgsrc":"",
196                         "poductname":"Carter's1年式灰色長袖連體衣包腳爬服",
197                         "activitydate":"雙11價",
198                         "price":"299",
199                         "preferential":"滿400減100",
200                         "activitytype":"熱賣5885件",
201                         "shoplink":"##",
202                         "activityname":"立刻搶"
203                     },
204                     {
205                         "link":"##",
206                         "imgsrc":"",
207                         "poductname":"光澤褲！[不起球不退色不勾絲]",
208                         "activitydate":"雙11價",
209                         "price":"8",
210                         "preferential":"滿50減5",
211                         "activitytype":"熱賣5885件",
212                         "shoplink":"##",
213                         "activityname":"立刻搶"
214                     }]
215                 }]
216             };
217             
218 
219         })();
220         </script>
221         
222     </body>
223 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。