Commit 3c428e9e1029651c7faded84b79e9bf99fb841f5

Authored by 前端开发-罗建龙
1 parent e53db1cd

秒杀自定义组件1

components/diy_seckill/diy_seckill.js
... ... @@ -35,7 +35,9 @@ Component({
35 35 ylp_img: "https://mshopimg.yolipai.net/",
36 36 imghost: os.imghost,
37 37 timer: null,
38   - user_id:0
  38 + user_id:0,
  39 + img_width:100,
  40 + img_height:100
39 41 },
40 42  
41 43 pageLifetimes: {
... ... @@ -45,7 +47,7 @@ Component({
45 47 var th = this;
46 48 var g_id = this.data.object;
47 49 //只有再会员登陆之后,才重新调用接口
48   -
  50 + console.log('秒杀组件------------');
49 51 if(this.data.user_id!=getApp().globalData.user_id){
50 52 this.data.user_id=getApp().globalData.user_id
51 53 this.init(g_id);
... ... @@ -67,6 +69,7 @@ Component({
67 69  
68 70 ready: function () {
69 71 var g_id = this.data.object;
  72 +
70 73 this.init(g_id);
71 74 this.data.user_id=getApp().globalData.user_id;
72 75 },
... ... @@ -79,7 +82,7 @@ Component({
79 82 customMethod: function () { },
80 83 init: function (g_id) {
81 84 var th = this;
82   -
  85 + this.loadImg(g_id)
83 86 getApp().getConfig2(function (e) {
84 87 var swithc_list = e.switch_list;
85 88 var sw_arr = JSON.parse(swithc_list);
... ... @@ -209,7 +212,10 @@ Component({
209 212 for (var i = 0; i < all_array.length; i += 3) {
210 213 arr.push(all_array.slice(i, i + 3));
211 214 }
212   - /*--熏染到前台--*/
  215 + /*--熏染到前台--*/
  216 + console.log('秒杀数据:');
  217 + console.log(arr);
  218 + console.error('....................');
213 219 th.setData({ goods_array: arr });
214 220 });
215 221  
... ... @@ -285,7 +291,28 @@ Component({
285 291 wx.navigateTo({
286 292 url: "/pages/activity/seckill_list/seckill_list"
287 293 });
  294 + },
  295 + loadImg(g_id){
  296 + console.log('图片加载------');
  297 + console.error('秒杀组件---------');
  298 + console.error(g_id);
  299 + console.log('..................................');
  300 + if (g_id.style==1) {
  301 + let w=''
  302 + switch (g_id.picture_scale) {
  303 + case 1:
  304 + w=`width:calc(100%-${g_id.page_margins*2}px);height:calc(100%-${g_id.page_margins*2}px)`
  305 + break;
  306 +
  307 + default:
  308 + break;
  309 + }
  310 +
  311 +
  312 +
  313 + }
288 314 }
  315 +
289 316 },
290 317  
291 318  
... ...
components/diy_seckill/diy_seckill.wxml
1 1 <block wx:if="{{goods_array.length>0}}">
2   - <!--秒杀-->
3   - <view class='top' bindtap="go_to_skill">
4   - <view class="flex">
5   - <view class='t_left'></view>
6   - <view class='t_ms'>秒杀</view>
  2 + <block wx:if="{{object.column_action_name}}">
  3 + <!--秒杀-->
  4 + <view class='top' bindtap="go_to_skill" wx:if="{{object.column_title}}" style="{{'background-image:url('+object.column_diy_title+')'}}">
  5 + <view class="flex">
  6 + <view class='t_left'></view>
  7 + <view class='t_ms'>{{object.column_name}}</view>
  8 + </view>
  9 + <view class='right_k'>
  10 + <image src="{{imghost}}/miniapp/images/icon-arrowdown.png" lazy-load="true"></image>
  11 + </view>
7 12 </view>
8   - <view class='right_k'>
9   - <image src="{{imghost}}/miniapp/images/icon-arrowdown.png" lazy-load="true"></image>
  13 + <block wx:if="{{object.style==1}}">
  14 + <view style="{{'padding-left:'+object.page_margins+'px;padding-right:'+object.page_margins+'px;'}}" class="new_item1_box">
  15 + <block wx:for="{{goods_array}}">
  16 + <view wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind" class="{{'new_item1 ' + (object.product_style==2 ? ' boxsha ':'') + (object.product_style==3 ? ' aborder ':'') + (object.chamfer_of_main_drawing==2 ? ' but_radius5 ':'') + ((object.product_style==1 || object.product_style==3 )? ' bgf ':'')}}" style="{{'margin-bottom:'+object.page_margins+'px;'}}">
  17 + <navigator url="{{aitem.goods_type == 1 ? ('/packageA/pages/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id ) : ('/pages/goods/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id)}}" class="s1_gk_a1">
  18 + <view class="imgBox">
  19 + <!-- <image mode="{{object.picture_fill==1 ? 'aspectFill' : 'scaleToFill'}}" class="{{'new_item1_image '+ 'aspect_ratio'+object.picture_scale}}" style="{{'width:'+img_width+';height:'+img_height}}" src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image> -->
  20 + <image mode="scaleToFill" class="{{'new_item1_image '+ 'aspect_ratio'+object.picture_scale}}" src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image>
  21 + <image class="imgBox_img" wx:if="{{object.subscript_style==5}}" src="{{object.subscript_diy_style}}"></image>
  22 + <image class="imgBox_img" wx:if="{{object.subscript_style<=4}}" src="{{imghost+'/miniapp/images/component/j0'+object.subscript_style +'.png'}}"></image>
  23 + </view>
  24 + <view class="new_item1_time" wx:if="{{object.count_down}}">
  25 + <image src="{{imghost+'/miniapp/images/component/seckill.png'}}"></image>
  26 + <view style="text-align: center;">
  27 + <view>距结束时间</view>
  28 + <view>{{aitem.djs.day}}天{{aitem.djs.hou}}:{{aitem.djs.min}}:{{aitem.djs.sec}}</view>
  29 + </view>
  30 + </view>
  31 + <view class="ellipsis-2 new_item1_goods_name" wx:if="{{object.trade_name}}">{{aitem.goods_name}}</view>
  32 + <view class="new_item1_price">
  33 + <view>
  34 + <view class="flex" style="font-size: 28rpx;">
  35 + <view class="clor" style="margin-right: 5rpx;" wx:if="{{object.commodity_price}}">¥<text style="font-size:42rpx;">{{aitem.price}}</text></view>
  36 + <view wx:if="{{object.wholesale_price}}">¥{{aitem.market_price}}</view>
  37 + </view>
  38 + <view style="color: rgb(56, 56, 56);">
  39 + <text wx:if="{{object.seconds_num}}">已秒 <text class="clor">10</text>件,</text>
  40 + <text wx:if="{{object.remaining_inventory}}">还剩余<text class="clor">20</text>件</text>
  41 + </view>
  42 + </view>
  43 + <view>
  44 + <image wx:if="{{object.purchase_button<=4}}" src="{{imghost+'/miniapp/images/component/0'+object.purchase_button+'.png'}}" style="width: 122rpx;height: 122rpx;"></image>
  45 + <view wx:if="{{ 5<=object.purchase_button && object.purchase_button<=8 }}" class="{{'new_item1_but ' + (object.purchase_button==5 ? 'new_item1_but1':'' )+ (object.purchase_button==7 ? 'new_item1_but2':'' )+ (object.purchase_button==8 ? 'new_item1_but3':'' ) }}">{{object.button_content}}</view>
  46 + </view>
  47 + </view>
  48 + </navigator>
  49 + </view>
  50 + </block>
  51 + </view>
  52 + </block>
  53 + </block>
  54 + <block wx:else>
  55 + <!--秒杀-->
  56 + <view class='top' bindtap="go_to_skill">
  57 + <view class="flex">
  58 + <view class='t_left'></view>
  59 + <view class='t_ms'>秒杀</view>
  60 + </view>
  61 + <view class='right_k'>
  62 + <image src="{{imghost}}/miniapp/images/icon-arrowdown.png" lazy-load="true"></image>
  63 + </view>
10 64 </view>
11   - </view>
  65 + <!--商品展示-->
  66 + <swiper class="s_prom" indicator-active-color='red' indicator-dots="false" wx:if="{{object.style==1}}">
  67 + <view class='sp' wx:if="{{object.style==1}}">
  68 + <swiper-item class="s_it" wx:for="{{goods_array}}">
  69 + <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind">
  70 + <!-- <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}&prom_type=1&prom_id={{aitem.id}}" class="s1_gk_a1"> -->
  71 + <navigator url="{{aitem.goods_type == 1 ? ('/packageA/pages/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id ) : ('/pages/goods/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id)}}" class="s1_gk_a1">
  72 + <view class='one'>
  73 + <view class='sp_top'>
  74 + <view class='po'></view>
  75 + <block wx:if="{{aitem.status == 0}}">
  76 + <view class="rob" style="justify-content: flex-start">
  77 + <span class='s_top_kill' style="background-color: #ffe718;color: #3c3b31;font-weight: bold">即将开始</span>
  78 + </view>
  79 + </block>
  80 + <block wx:if="{{aitem.status == 1}}">
  81 + <view class="rob" style="justify-content: flex-start">
  82 + <span class='s_top_kill'>火热进行</span>
  83 + </view>
  84 + </block>
  85 + <block wx:if="{{aitem.status == 2}}">
  86 + <view class="rob" style="justify-content: flex-start">
  87 + <span class='s_top_kill gray'>已抢光</span>
  88 + </view>
  89 + </block>
  90 + <block wx:if="{{aitem.status == 3}}">
  91 + <view class="rob" style="justify-content: flex-start">
  92 + <span class='s_top_kill gray'>活动已结束</span>
  93 + </view>
  94 + </block>
  95 +
  96 +
12 97  
13   - <!--商品展示-->
14   - <swiper class="s_prom" indicator-active-color='red' indicator-dots="false" wx:if="{{object.style==1}}">
15   - <view class='sp' wx:if="{{object.style==1}}">
16   - <swiper-item class="s_it" wx:for="{{goods_array}}">
17   - <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind">
18   - <!-- <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}&prom_type=1&prom_id={{aitem.id}}" class="s1_gk_a1"> -->
19   - <navigator url="{{aitem.goods_type == 1 ? ('/packageA/pages/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id ) : ('/pages/goods/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id)}}" class="s1_gk_a1">
20   - <view class='one'>
21   - <view class='sp_top'>
22   - <view class='po'></view>
23   - <block wx:if="{{aitem.status == 0}}">
24   - <view class="rob" style="justify-content: flex-start">
25   - <span class='s_top_kill' style="background-color: #ffe718;color: #3c3b31;font-weight: bold">即将开始</span>
  98 + <view class='clear'></view>
  99 +
  100 + <view class='s_img'>
  101 + <image src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image>
26 102 </view>
27   - </block>
28   -
29   - <!-- <block wx:if="{{aitem.end_time<=newTime}}">
30   - <view class="rob" style="justify-content: flex-start">
31   - <span class='s_top_kill gray'>活动已结束</span>
32   - </view>
33   - </block>
34   - <block wx:else>
35   - <block wx:if="{{aitem.start_time<newTime && aitem.goods_num>aitem.buy_num}}">
36   - <view class="rob" style="justify-content: flex-start">
37   - <span class='s_top_kill'>火热进行</span>
38   - </view>
39   - </block>
40   - <block wx:if="{{aitem.goods_num<=aitem.buy_num}}">
41   - <view class="rob" style="justify-content: flex-start">
42   - <span class='s_top_kill gray'>已抢光</span>
43   - </view>
44   - </block>
45   - </block> -->
46   -
47   -
48   - <block wx:if="{{aitem.status == 1}}">
49   - <view class="rob" style="justify-content: flex-start">
50   - <span class='s_top_kill'>火热进行</span>
51   - </view>
52   - </block>
53   - <block wx:if="{{aitem.status == 2}}">
54   - <view class="rob" style="justify-content: flex-start">
55   - <span class='s_top_kill gray'>已抢光</span>
56   - </view>
57   - </block>
58   - <block wx:if="{{aitem.status == 3}}">
59   - <view class="rob" style="justify-content: flex-start">
60   - <span class='s_top_kill gray'>活动已结束</span>
61   - </view>
62   - </block>
63   -
64   -
65 103  
66   - <view class='clear'></view>
  104 + <view class='s_foot_kill'>
  105 + <text>{{aitem.djs.day}}天</text>
  106 + <text>{{aitem.djs.hou}}时</text>
  107 + <text>{{aitem.djs.min}}分</text>
  108 + <text>{{aitem.djs.sec}}秒</text>
  109 + </view>
  110 + <view class='clear'></view>
67 111  
68   - <view class='s_img'>
69   - <image src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image>
70 112 </view>
71 113  
72   - <view class='s_foot_kill'>
73   - <text>{{aitem.djs.day}}天</text>
74   - <text>{{aitem.djs.hou}}时</text>
75   - <text>{{aitem.djs.min}}分</text>
76   - <text>{{aitem.djs.sec}}秒</text>
  114 + <view class='sp_wz'>
  115 + <view class='sp_wzi ellipsis-2'>{{aitem.goods_name}}</view>
  116 + <view class='sp_jg'>¥{{aitem.price}}</view>
  117 + <view wx:if="{{is_retail_price}}"class='sp_jgx ~no_line_x'>¥{{aitem.market_price}}</view>
77 118 </view>
78   - <view class='clear'></view>
79 119  
80 120 </view>
  121 + </navigator>
  122 + </block>
  123 + </swiper-item>
  124 + </view>
  125 + </swiper>
  126 + <view class="sp2" wx:if="{{object.style==2}}">
  127 + <block wx:for="{{goods_array}}">
  128 + <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind">
  129 + <!-- <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}&prom_type=1&prom_id={{aitem.id}}" class="s1_gk_a1"> -->
  130 + <navigator url="{{aitem.goods_type == 1 ? ('/packageA/pages/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id ) : ('/pages/goods/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id)}}" class="s1_gk_a1">
  131 + <view class='one1'>
81 132  
82   - <view class='sp_wz'>
83   - <view class='sp_wzi ellipsis-2'>{{aitem.goods_name}}</view>
84   - <view class='sp_jg'>¥{{aitem.price}}</view>
85   - <view wx:if="{{is_retail_price}}"class='sp_jgx ~no_line_x'>¥{{aitem.market_price}}</view>
  133 + <view class="o1_img">
  134 + <image src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image>
86 135 </view>
87 136  
88   - </view>
89   - </navigator>
90   - </block>
91   - </swiper-item>
92   - </view>
93   - </swiper>
  137 + <view class="o1_right">
  138 + <view class="sp_wzi ellipsis-2">{{aitem.title}}</view>
  139 + <view class="o1_sj_kill">
  140 + <text>{{aitem.djs.day}}</text> 天
  141 + <text>{{aitem.djs.hou}}</text> :
  142 + <text>{{aitem.djs.min}}</text> :
  143 + <text>{{aitem.djs.sec}}</text>
94 144  
  145 + </view>
  146 + <view class="money">
  147 + <view class='sp_jg'>¥{{aitem.price}}</view>
  148 + <!-- <view class='sp_jgx'>¥{{aitem.market_price}}</view>-->
  149 + </view>
  150 + <block wx:if="{{aitem.status == 0}}">
  151 + <view class="rob">
  152 + <view class="wo" style="background-color: #adadad">正在预热</view>
  153 + </view>
  154 + </block>
  155 +
  156 + <block wx:if="{{aitem.status == 3}}">
  157 + <view class="rob">
  158 + <view class="wo" style="background-color: #adadad">已结束</view>
  159 + </view>
  160 + </block>
  161 + <block wx:else>
  162 + <block wx:if="{{aitem.status == 1}}">
  163 + <view class="rob">
  164 + <view class="wo">我要抢</view>
  165 + </view>
  166 + </block>
95 167  
96   -
97   - <view class="sp2" wx:if="{{object.style==2}}">
98   - <block wx:for="{{goods_array}}">
99   - <block wx:for="{{item}}" wx:for-item="aitem" wx:for-index="aind">
100   - <!-- <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}&prom_type=1&prom_id={{aitem.id}}" class="s1_gk_a1"> -->
101   - <navigator url="{{aitem.goods_type == 1 ? ('/packageA/pages/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id ) : ('/pages/goods/goodsInfo/goodsInfo?goods_id=' + aitem.goods_id + '&title=' + aitem.goods_name + '&prom_type=1&prom_id=' + aitem.id)}}" class="s1_gk_a1">
102   - <view class='one1'>
103   -
104   - <view class="o1_img">
105   - <image src="{{imghost+aitem.original_img}}" data-errorimg="goods_array[{{index}}][{{aind}}].original_img" binderror="bind_bnerr3"></image>
  168 + <block wx:if="{{aitem.status == 2}}">
  169 + <view class="rob">
  170 + <view class="wo" style="background-color: #adadad">已抢光</view>
106 171 </view>
  172 + </block>
  173 + </block>
107 174  
108   - <view class="o1_right">
109   - <view class="sp_wzi ellipsis-2">{{aitem.title}}</view>
110   - <view class="o1_sj_kill">
111   - <text>{{aitem.djs.day}}</text> 天
112   - <text>{{aitem.djs.hou}}</text> :
113   - <text>{{aitem.djs.min}}</text> :
114   - <text>{{aitem.djs.sec}}</text>
115 175  
116 176 </view>
117   - <view class="money">
118   - <view class='sp_jg'>¥{{aitem.price}}</view>
119   -<!-- <view class='sp_jgx'>¥{{aitem.market_price}}</view>-->
120   - </view>
121   - <block wx:if="{{aitem.status == 0}}">
122   - <view class="rob">
123   - <view class="wo" style="background-color: #adadad">正在预热</view>
124   - </view>
125   - </block>
126   -
127   - <block wx:if="{{aitem.status == 3}}">
128   - <view class="rob">
129   - <view class="wo" style="background-color: #adadad">已结束</view>
130   - </view>
131   - </block>
132   - <block wx:else>
133   - <block wx:if="{{aitem.status == 1}}">
134   - <view class="rob">
135   - <view class="wo">我要抢</view>
136   - </view>
137   - </block>
138   -
139   - <block wx:if="{{aitem.status == 2}}">
140   - <view class="rob">
141   - <view class="wo" style="background-color: #adadad">已抢光</view>
142   - </view>
143   - </block>
144   - </block>
145   -
146   -
147 177 </view>
148   - </view>
149   - </navigator>
  178 + </navigator>
  179 + </block>
150 180 </block>
151   - </block>
152   -
153   - </view>
154   - <view class='clear'></view>
155 181  
  182 + </view>
  183 + <view class='clear'></view>
  184 + </block>
156 185 </block>
157 186 \ No newline at end of file
... ...
components/diy_seckill/diy_seckill.wxss
... ... @@ -297,4 +297,117 @@ swiper {
297 297 display: -webkit-box;
298 298 -webkit-box-orient: vertical;
299 299 -webkit-line-clamp: 2;
300   -}
301 300 \ No newline at end of file
  301 +}
  302 +
  303 +
  304 +.new_item1{
  305 + width: 100%;
  306 + overflow: hidden;
  307 +}
  308 +.new_item1_image{
  309 + width: 100%;
  310 + /* max-width: 100%;
  311 + max-height: 100%; */
  312 +}
  313 +.new_item1_time{
  314 + height: 70rpx;
  315 + background: rgba(196, 24, 45, 1);
  316 + color: #fff;
  317 + font-size: 25rpx;
  318 + display: flex;
  319 + justify-content: space-between;
  320 + align-items: center;
  321 + padding: 0rpx 30rpx;
  322 +
  323 +}
  324 +.new_item1_time image{
  325 + width: 188rpx;
  326 + height: 52rpx;
  327 +}
  328 +.new_item1_goods_name{
  329 + padding: 10rpx;
  330 + font-size: 28rpx;
  331 +
  332 +}
  333 +.new_item1_price{
  334 + display: flex;
  335 + padding: 10rpx;
  336 + align-items: center;
  337 + justify-content: space-between;
  338 +}
  339 +.clor{
  340 + color: rgba(196, 24, 45, 1);
  341 +}
  342 +.new_item1_but{
  343 + width: 130rpx;
  344 + height: 60rpx;
  345 + color: #fff;
  346 + background-color: rgba(196,24,45,1);
  347 + line-height: 60rpx;
  348 + text-align: center;
  349 + border-radius: 15rpx;
  350 +}
  351 +.new_item1_but1{
  352 + border-radius: 50rpx !important;
  353 +}
  354 +.new_item1_but2{
  355 + border-radius: 50rpx !important;
  356 + background-color: rgba(0, 0, 0, 0) !important;
  357 + color: rgba(196,24,45,1) !important;
  358 + border: 1rpx solid rgba(196,24,45,1) !important;
  359 +}
  360 +.new_item1_but3{
  361 + background-color: rgba(0, 0, 0, 0) !important;
  362 + color: rgba(196,24,45,1) !important;
  363 + border: 1rpx solid rgba(196,24,45,1) !important;
  364 +}
  365 +
  366 +
  367 +
  368 +
  369 +.new_item1_box{
  370 + padding-top: 17rpx;
  371 + width: 100%;
  372 + box-sizing: border-box;
  373 + overflow: hidden;
  374 +}
  375 +
  376 +.aborder{
  377 + border: 1px solid #e8e8e8;
  378 +}
  379 +.bgf{
  380 + background-color: #fff;
  381 +}
  382 +.boxsha{
  383 + /* box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); */
  384 + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  385 +}
  386 +.but_radius85{
  387 + border-radius:289rpx;
  388 +}
  389 +.but_radius5{
  390 + border-radius:17px;
  391 +}
  392 +.imgBox{
  393 + position: relative;
  394 +}
  395 +.imgBox_img{
  396 + position: absolute;
  397 + left: 0;
  398 + top: 22rpx;
  399 + width: 74rpx;
  400 + height: 60rpx;
  401 +}
  402 +
  403 +.aspect_ratio1{
  404 + aspect-ratio:1/1;
  405 +}
  406 +.aspect_ratio2{
  407 + aspect-ratio:16/9;
  408 +}
  409 +.aspect_ratio3{
  410 + aspect-ratio:3/2;
  411 +}
  412 +.aspect_ratio4{
  413 + aspect-ratio:3/4;
  414 +}
... ...