Commit 12eab642d3ad8a47d554e5355601c676a0a19510

Authored by chenbiao
2 parents b9ec5385 6805d8d5

Merge remote-tracking branch 'origin/branch' into branch

common/common.js
... ... @@ -29,9 +29,13 @@ const getBusinessParkOrderByBusIdForPage = serverUrl + "/business/h5/order/getBu
29 29 const getPayOrderByOrderId = serverUrl + "/business/h5/order/getPayOrderByOrderId";
30 30 //刘淇接口
31 31  
32   -
33 32 // 商户卡券-可以购买卡券列表-分页
34   -const couponRuleParkPage = serverUrl + "business/h5/coupon/couponRuleParkPage";
  33 +const couponRuleParkPage = serverUrl + "/business/h5/coupon/couponRuleParkPage";
  34 +
  35 +
  36 +// 商户卡券-卡券申领明细
  37 +const couponIssuedParkPage = serverUrl + "/business/h5/couponIssued/couponIssuedParkPage";
  38 +
35 39  
36 40  
37 41 //陈彪接口
... ... @@ -188,8 +192,8 @@ export default {
188 192 //刘淇接口
189 193 getBusinessParkOrderByBusIdForPage,
190 194 getPayOrderByOrderId,
191   -
192   -
  195 + couponRuleParkPage,
  196 + couponIssuedParkPage,
193 197  
194 198 //陈彪接口
195 199 rechargeList,
... ...
common/filters.js
... ... @@ -78,6 +78,32 @@ const sexFilter = value => {
78 78 }
79 79 }
80 80  
  81 +// 商户卡券类型
  82 +const cardTypeFormate = num => {
  83 + console.log('1111111111111')
  84 + // 1-单次券,2-时长券,3-满减券,4-金额券,5-包天券,6-折扣券
  85 + if(num == '1'){
  86 + return '单次券'
  87 + }
  88 + if(num == 2){
  89 + return '时长券'
  90 + }
  91 + if(num == 3){
  92 + return '满减券'
  93 + }
  94 + if(num == 4){
  95 + return '金额券'
  96 + }
  97 + if(num == 5){
  98 + return '包天券'
  99 + }
  100 + if(num == 6){
  101 + return '折扣券'
  102 + }
  103 +
  104 +}
  105 +
  106 +
81 107 export default {
82 108 tranNull,
83 109 RMB,
... ... @@ -86,4 +112,5 @@ export default {
86 112 ortherToFixed,
87 113 toThousands,
88 114 sexFilter,
  115 + cardTypeFormate
89 116 }
... ...
pages.json
... ... @@ -67,6 +67,12 @@
67 67 }
68 68 },
69 69 {
  70 + "path": "pages/businessCard/cardDetail",
  71 + "style": {
  72 + "navigationBarTitleText": "商户卡券明细"
  73 + }
  74 + },
  75 + {
70 76 "path": "pages/parkRecordList/recordDetail",
71 77 "style": {
72 78 "navigationBarTitleText": "订单详情"
... ...
pages/businessCard/businessCard.vue
1 1 <template>
2 2 <view>
3   - <uni-section title="50%(折扣券)" type="line">
4   - <uni-card padding="0" spacing="0">
5   -
6   - <uni-list>
7   - <uni-list-item title="适应车场" rightText="万达商业广场">
8   - <text></text>
9   - </uni-list-item>
10   - <uni-list-item title="价格:¥5/张" rightText="商户库存:0张"></uni-list-item>
11   - </uni-list>
12   - <view slot="actions" class="card-actions no-border">
13   -
14   - <view class="card-actions-item" @click="actionsClick('购买')">
15   - <uni-icons type="cart-filled" size="18" color="#999"></uni-icons>
16   - <text class="card-actions-item-text">购买</text>
17   - </view>
18   - <view class="card-actions-item" @click="actionsClick('发放')">
19   - <uni-icons type="redo-filled" size="18" color="#999"></uni-icons>
20   - <text class="card-actions-item-text">发放</text>
21   - </view>
22   - <view class="card-actions-item" @click="actionsClick('打印')">
23   - <uni-icons type="shop-filled" size="18" color="#999"></uni-icons>
24   - <text class="card-actions-item-text">打印</text>
25   - </view>
26   -
27   -
28   - </view>
29   - </uni-card>
30   - </uni-section>
31   -
32   - <uni-section title="2小时(时长券)" type="line">
33   - <uni-card padding="0" spacing="0">
34   - <!--<template v-slot:cover>-->
35   - <!--<view class="custom-cover">-->
36   - <!--<image class="cover-image" mode="aspectFill" :src="cover">-->
37   - <!--</image>-->
38   - <!--<view class="cover-content">-->
39   - <!--<text class="uni-subtitle uni-white">今日新闻热点</text>-->
40   - <!--</view>-->
41   - <!--</view>-->
42   - <!--</template>-->
43   - <uni-list>
44   - <uni-list-item title="适应车场" rightText="万达商业广场">
45   - <text></text>
46   - </uni-list-item>
47   - <uni-list-item title="价格:¥5/张" rightText="商户库存:0张"></uni-list-item>
48   - </uni-list>
49   - <view slot="actions" class="card-actions no-border">
50   -
51   - <view class="card-actions-item" @click="actionsClick('购买')">
52   - <uni-icons type="cart-filled" size="18" color="#999"></uni-icons>
53   - <text class="card-actions-item-text">购买</text>
54   - </view>
55   -
56   - </view>
57   - </uni-card>
58   - </uni-section>
59   -
60   - <uni-section title="5元(金额券)" type="line">
61   - <uni-card padding="0" spacing="0">
62   - <!--<template v-slot:cover>-->
63   - <!--<view class="custom-cover">-->
64   - <!--<image class="cover-image" mode="aspectFill" :src="cover">-->
65   - <!--</image>-->
66   - <!--<view class="cover-content">-->
67   - <!--<text class="uni-subtitle uni-white">今日新闻热点</text>-->
68   - <!--</view>-->
69   - <!--</view>-->
70   - <!--</template>-->
71   - <uni-list>
72   - <uni-list-item title="适应车场" rightText="万达商业广场">
73   - <text></text>
74   - </uni-list-item>
75   - <uni-list-item title="价格:¥5/张" rightText="商户库存:0张"></uni-list-item>
76   - </uni-list>
77   - <view slot="actions" class="card-actions no-border">
78   -
79   - <view class="card-actions-item" @click="actionsClick('购买')">
80   - <uni-icons type="cart-filled" size="18" color="#999"></uni-icons>
81   - <text class="card-actions-item-text">购买</text>
82   - </view>
83   -
84   - </view>
85   - </uni-card>
86   - </uni-section>
87   -
88   -
89   - <uni-section title="满10减5(满减券)" type="line">
90   - <uni-card padding="0" spacing="0">
91   - <!--<template v-slot:cover>-->
92   - <!--<view class="custom-cover">-->
93   - <!--<image class="cover-image" mode="aspectFill" :src="cover">-->
94   - <!--</image>-->
95   - <!--<view class="cover-content">-->
96   - <!--<text class="uni-subtitle uni-white">今日新闻热点</text>-->
97   - <!--</view>-->
98   - <!--</view>-->
99   - <!--</template>-->
100   - <uni-list>
101   - <uni-list-item title="适应车场" rightText="万达商业广场">
102   - <text></text>
103   - </uni-list-item>
104   - <uni-list-item title="价格:¥5/张" rightText="商户库存:0张"></uni-list-item>
105   - </uni-list>
106   - <view slot="actions" class="card-actions no-border">
107   -
108   - <view class="card-actions-item" @click="actionsClick('购买')">
109   - <uni-icons type="cart-filled" size="18" color="#999"></uni-icons>
110   - <text class="card-actions-item-text">购买</text>
111   - </view>
112   -
113   - </view>
114   - </uni-card>
115   - </uni-section>
116   -
117   -
118   - <uni-section title="单次(单次券)" type="line">
119   - <uni-card padding="0" spacing="0">
120   - <!--<template v-slot:cover>-->
121   - <!--<view class="custom-cover">-->
122   - <!--<image class="cover-image" mode="aspectFill" :src="cover">-->
123   - <!--</image>-->
124   - <!--<view class="cover-content">-->
125   - <!--<text class="uni-subtitle uni-white">今日新闻热点</text>-->
126   - <!--</view>-->
127   - <!--</view>-->
128   - <!--</template>-->
129   - <uni-list>
130   - <uni-list-item title="适应车场" rightText="万达商业广场">
131   - <text></text>
132   - </uni-list-item>
133   - <uni-list-item title="价格:¥5/张" rightText="商户库存:0张"></uni-list-item>
134   - </uni-list>
135   - <view slot="actions" class="card-actions no-border">
136   -
137   - <view class="card-actions-item" @click="actionsClick('购买')">
138   - <uni-icons type="cart-filled" size="18" color="#999"></uni-icons>
139   - <text class="card-actions-item-text">购买</text>
140   - </view>
141   -
142   - </view>
143   - </uni-card>
144   - </uni-section>
145   -
146   - <uni-section title="单天(包天券)" type="line">
147   - <uni-card padding="0" spacing="0">
148   - <!--<template v-slot:cover>-->
149   - <!--<view class="custom-cover">-->
150   - <!--<image class="cover-image" mode="aspectFill" :src="cover">-->
151   - <!--</image>-->
152   - <!--<view class="cover-content">-->
153   - <!--<text class="uni-subtitle uni-white">今日新闻热点</text>-->
154   - <!--</view>-->
155   - <!--</view>-->
156   - <!--</template>-->
157   - <uni-list>
158   - <uni-list-item title="适应车场" rightText="万达商业广场">
159   - <text></text>
160   - </uni-list-item>
161   - <uni-list-item title="价格:¥5/张" rightText="商户库存:0张"></uni-list-item>
162   - </uni-list>
163   - <view slot="actions" class="card-actions no-border">
164   -
165   - <view class="card-actions-item" @click="actionsClick('购买')">
166   - <uni-icons type="cart-filled" size="18" color="#999"></uni-icons>
167   - <text class="card-actions-item-text">购买</text>
168   - </view>
169   -
170   - </view>
171   - </uni-card>
172   - </uni-section>
173   -
  3 + <view v-if="dataList.length>0">
  4 + <view v-for="(i, index) in dataList" :key="i.id">
  5 + <uni-section :title="`${i.cardRuleName}(${i.cardTypeName })`" type="line">
  6 + <uni-card padding="0" spacing="0">
  7 +
  8 + <uni-list>
  9 + <uni-list-item title="适应车场" :rightText="i.plName">
  10 + <text></text>
  11 + </uni-list-item>
  12 + <uni-list-item :title="`价格: ¥${i.value}/张`"
  13 + :rightText="`商户库存:${i.cardNum}张`"></uni-list-item>
  14 + </uni-list>
  15 + <view slot="actions" class="card-actions no-border">
  16 +
  17 + <view class="card-actions-item" @click="toBuy(i)">
  18 + <uni-icons type="cart-filled" size="18" color="#999"></uni-icons>
  19 + <text class="card-actions-item-text">购买</text>
  20 + </view>
  21 + <view class="card-actions-item" @click="actionsClick('发放')" v-if="i.cardNum>0">
  22 + <uni-icons type="redo-filled" size="18" color="#999"></uni-icons>
  23 + <text class="card-actions-item-text">发放</text>
  24 + </view>
  25 + <view class="card-actions-item" @click="actionsClick('打印')" v-if="i.cardNum>0">
  26 + <uni-icons type="shop-filled" size="18" color="#999"></uni-icons>
  27 + <text class="card-actions-item-text">打印</text>
  28 + </view>
  29 + </view>
  30 + </uni-card>
  31 + </uni-section>
  32 + </view>
  33 +
  34 + </view>
  35 +
  36 + <view class="common-page-head" v-else>暂无可以购买的商户卡券</view>
174 37 </view>
175 38 </template>
176 39  
177 40 <script>
178   -import common from "../../common/common.js";
179 41 export default {
180 42 data() {
181   - const currentDate = this.getDate({
182   - format: true
183   - })
184 43 return {
185   - title: 'picker',
186   - array: ['全部', '充值', '支付'],
187   - arrayWay: ['所有方式', '微信', '线下公对公'],
188   - index: 0,
189   - indexWay: 0,
190   - benginDate: currentDate,
191   - overDate: currentDate,
  44 + dataList: [],
192 45 rows: [],
193 46 pageNum: 1,//当前页
194 47 pageSize: 1,//每页条数
... ... @@ -210,11 +63,8 @@ export default {
210 63 },
211 64 onShow() {
212 65 var me = this;
213   -
214   - },
215   - computed: {
216   -
217 66 },
  67 + computed: {},
218 68 methods: {
219 69 // 通过商户ID查询停车记录信息
220 70 couponRuleParkPage() {
... ... @@ -225,14 +75,19 @@ export default {
225 75 }
226 76 // 首页信息获取 接口
227 77 that.$myRequest({
228   - url: that.$common.getBusinessParkOrderByBusIdForPage,
  78 + url: that.$common.couponRuleParkPage,
229 79 method: 'POST',
230 80 data: that.$common.requestSign(paramsData)
231 81 }).then(res => {
232   - this.recordList = res.data.dataList
  82 + this.dataList = res.data.dataList
  83 + console.log(this.dataList)
233 84 })
234 85 },
235   -
  86 + toBuy(i) {
  87 + uni.navigateTo({
  88 + url: '../businessCard/buyCard?optionData='+JSON.stringify(i)
  89 + });
  90 + },
236 91 }
237 92 }
238 93 </script>
... ...
pages/businessCard/buyCard.vue
... ... @@ -3,15 +3,6 @@
3 3  
4 4 <uni-section title="2小时(时长券)" type="line" >
5 5 <uni-card padding="0" spacing="0">
6   - <!--<template v-slot:cover>-->
7   - <!--<view class="custom-cover">-->
8   - <!--<image class="cover-image" mode="aspectFill" :src="cover">-->
9   - <!--</image>-->
10   - <!--<view class="cover-content">-->
11   - <!--<text class="uni-subtitle uni-white">今日新闻热点</text>-->
12   - <!--</view>-->
13   - <!--</view>-->
14   - <!--</template>-->
15 6 <uni-list>
16 7 <uni-list-item title="适应车场" rightText="万达商业广场" >
17 8 <text></text>
... ... @@ -70,15 +61,7 @@
70 61 </view>
71 62 <uni-section title="24小时(包天券)" type="line" >
72 63 <uni-card padding="0" spacing="0">
73   - <!--<template v-slot:cover>-->
74   - <!--<view class="custom-cover">-->
75   - <!--<image class="cover-image" mode="aspectFill" :src="cover">-->
76   - <!--</image>-->
77   - <!--<view class="cover-content">-->
78   - <!--<text class="uni-subtitle uni-white">今日新闻热点</text>-->
79   - <!--</view>-->
80   - <!--</view>-->
81   - <!--</template>-->
  64 +
82 65 <uni-list>
83 66 <uni-list-item title="适应车场" rightText="万达商业广场" >
84 67 <text></text>
... ... @@ -120,7 +103,6 @@
120 103 </template>
121 104  
122 105 <script>
123   -import common from "../../common/common.js";
124 106 export default {
125 107 data() {
126 108 const currentDate = this.getDate({
... ... @@ -162,18 +144,7 @@ export default {
162 144 },
163 145 onShow() {
164 146 var me = this;
165   - var userInfo = me.getGlobalUser("globalUser");
166   - if (userInfo != null) {
167   - me.phoneNumb = userInfo.userPhone;
168   - }
169   - var pages = getCurrentPages();
170   - var currPage = pages[pages.length - 1]; //当前页面
171   - console.log('currPage.data.selCoupon = ' + currPage.data.selCoupon);
172   - me.selCoupon = currPage.data.selCoupon;
173   - console.log(JSON.stringify(me.selCoupon));
174   - // me.GetbillQueryInfo(me.mycarNumber, me.myorderId, me.myparkCode, me.selCoupon.cardNo, me.selCoupon.couponType, me.selCoupon
175   - // .discValue);
176   - // GetbillQueryInfo(carnum, orderId, parkCode, cardNo, couponType, disValue) {
  147 +
177 148 },
178 149 mounted() {
179 150 setTimeout(() => {
... ...
pages/businessCard/cardDetail.vue
... ... @@ -36,8 +36,9 @@
36 36 开始时间
37 37 </view>
38 38 <view class="uni-list-cell-db">
39   - <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
40   - <view class="uni-input">{{benginDate}}</view>
  39 + <picker mode="date" :value="beginTime" :start="startDate" :end="endDate"
  40 + @change="bindStartDateChange">
  41 + <view class="uni-input">{{beginTime}}</view>
41 42 </picker>
42 43 </view>
43 44 </view>
... ... @@ -49,13 +50,55 @@
49 50 结束时间
50 51 </view>
51 52 <view class="uni-list-cell-db">
52   - <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
53   - <view class="uni-input">{{overDate}}</view>
  53 + <picker mode="date" :value="endTime" :start="startDate" :end="endDate" @change="bindEndDateChange">
  54 + <view class="uni-input">{{endTime}}</view>
54 55 </picker>
55 56 </view>
56 57 </view>
57 58 </view>
58 59  
  60 + <view v-for="(i, index) in dataList" :key="i.id">
  61 + <uni-section :title="`${i.cardTypeName}(${i.cardType})`" type="line">
  62 + <uni-list>
  63 + <uni-list-item>
  64 + <template v-slot:body>
  65 + <view class="slot-box uni-con-width">
  66 + <view class="uni-flex uni-space-between ">
  67 + <view class="color-blue">
  68 + JE000100011
  69 + </view>
  70 + <view class="color-blue">
  71 + {{i.carNumber}}
  72 + </view>
  73 + </view>
  74 + <view class="uni-flex uni-space-between" style="padding: 10px 0">
  75 + <view>
  76 + <text class="color-blue paddingRight">领取时间</text>
  77 + 2020-11-01 01:01:01
  78 + </view>
  79 + <view class="color-green">
  80 + 已使用
  81 + </view>
  82 + </view>
  83 + <view class="uni-flex uni-space-between">
  84 + <view>
  85 + <text class="color-red paddingRight">使用时间</text>
  86 + 2020-11-01 01:01:01
  87 + </view>
  88 + <view class="color-green">
  89 + {{i.fullCutValue}}元/张
  90 + </view>
  91 + </view>
  92 + </view>
  93 + </template>
  94 + </uni-list-item>
  95 + </uni-list>
  96 + </uni-section>
  97 + </view>
  98 +
  99 +
  100 +
  101 +
59 102 <uni-section title="8折(折扣券)" type="line">
60 103 <uni-list>
61 104 <uni-list-item>
... ... @@ -71,7 +114,7 @@
71 114 </view>
72 115 <view class="uni-flex uni-space-between" style="padding: 10px 0">
73 116 <view>
74   - <text class="color-blue paddingRight" >领取时间</text>
  117 + <text class="color-blue paddingRight">领取时间</text>
75 118 2020-11-01 01:01:01
76 119 </view>
77 120 <view class="color-green">
... ... @@ -109,7 +152,7 @@
109 152 </view>
110 153 <view class="uni-flex uni-space-between" style="padding: 10px 0">
111 154 <view>
112   - <text class="color-blue paddingRight" >领取时间</text>
  155 + <text class="color-blue paddingRight">领取时间</text>
113 156 2020-11-01 01:01:01
114 157 </view>
115 158 <view class="color-red">
... ... @@ -146,7 +189,7 @@
146 189 </view>
147 190 <view class="uni-flex uni-space-between" style="padding: 10px 0">
148 191 <view>
149   - <text class="color-blue paddingRight" >领取时间</text>
  192 + <text class="color-blue paddingRight">领取时间</text>
150 193 2020-11-01 01:01:01
151 194 </view>
152 195 <view class="color-blue">
... ... @@ -167,13 +210,10 @@
167 210 </uni-list-item>
168 211 </uni-list>
169 212 </uni-section>
170   -
171   -
172 213 </view>
173 214 </template>
174 215  
175 216 <script>
176   -import common from "../../common/common.js";
177 217 export default {
178 218 data() {
179 219 const currentDate = this.getDate({
... ... @@ -181,15 +221,15 @@ export default {
181 221 })
182 222 return {
183 223 title: 'picker',
184   - array: ['折扣券', '金额券', '单次券', '包天券', '满减券', '时长券'],
185   - arrayWay: ['所有状态', '已失效', '已使用', '未使用', '已失效'],
  224 + array: ['单次券', '时长券', '满减券', '金额券', '包天券'],
  225 + arrayWay: ['已使用/绑定', '未使用'],
186 226 index: 0,
187 227 indexWay: 0,
188   - benginDate: currentDate,
189   - overDate: currentDate,
  228 + beginTime: currentDate,
  229 + endTime: currentDate,
190 230 rows: [],
191   - pageNum: 1,//当前页
192   - pageSize: 1,//每页条数
  231 + pageNum: '1',//当前页
  232 + pageSize: '10',//每页条数
193 233 reload: false,
194 234 status: 'more',
195 235 contentText: {
... ... @@ -198,43 +238,17 @@ export default {
198 238 contentmore: '我是有底线的~'
199 239 },
200 240 iconType: 'auto', // 图标样式
  241 + dataList: [],
201 242 }
202 243 },
203 244 onLoad(params) {
204 245 wx.showShareMenu({
205 246 withShareTicket: true
206 247 })
207   - // this.mycarNumber = params.carNumber;
208   - // this.myorderId = params.orderId;
209   - // this.myparkCode = params.parkCode;
210   - // this.myorderState = params.orderState;
211   - // this.totalFee = params.totalFee
212   - // this.unPayFee = params.unPayFee
213   - // if (params.orderState == 5) {
214   - // //停车补缴单 103
215   - // this.mypaySrcType = '103'
216   - // } else {
217   - // this.mypaySrcType = '101'
218   - // }
219   - // // this.GetbillQueryInfo(this.mycarNumber, this.myorderId, this.myparkCode);
220   - // this.getWxCode();
221   - // this.PDlogin();
222   - //console.log("xxxmake = "+this.makedateFormat());
  248 + this.couponIssuedParkPage()
223 249 },
224 250 onShow() {
225 251 var me = this;
226   - var userInfo = me.getGlobalUser("globalUser");
227   - if (userInfo != null) {
228   - me.phoneNumb = userInfo.userPhone;
229   - }
230   - var pages = getCurrentPages();
231   - var currPage = pages[pages.length - 1]; //当前页面
232   - console.log('currPage.data.selCoupon = ' + currPage.data.selCoupon);
233   - me.selCoupon = currPage.data.selCoupon;
234   - console.log(JSON.stringify(me.selCoupon));
235   - // me.GetbillQueryInfo(me.mycarNumber, me.myorderId, me.myparkCode, me.selCoupon.cardNo, me.selCoupon.couponType, me.selCoupon
236   - // .discValue);
237   - // GetbillQueryInfo(carnum, orderId, parkCode, cardNo, couponType, disValue) {
238 252 },
239 253 computed: {
240 254 startDate() {
... ... @@ -245,6 +259,27 @@ export default {
245 259 }
246 260 },
247 261 methods: {
  262 + couponIssuedParkPage: function () {
  263 + console.log(this.arrayWay)
  264 + let that = this
  265 + let paramsData = {
  266 + pageNum: this.pageNum,
  267 + pageSize: this.pageSize,
  268 + beginTime: this.beginTime,
  269 + endTime: this.endTime,
  270 + cardType: '', //卡券类型 :1-单次券,2-时长券,3-满减券,4-金额券,5-包天券
  271 + isUesed: '1', //所有状态:已失效,已使用、未使用
  272 + }
  273 + // 首页信息获取 接口
  274 + that.$myRequest({
  275 + url: that.$common.couponIssuedParkPage,
  276 + method: 'POST',
  277 + data: that.$common.requestSign(paramsData)
  278 + }).then(res => {
  279 + this.dataList = res.data.dataList
  280 + console.log(this.dataList)
  281 + })
  282 + },
248 283 bindPickerChange: function (e) {
249 284 console.log('picker发送选择改变,携带值为', e.detail.value)
250 285 this.index = e.detail.value
... ... @@ -254,10 +289,10 @@ export default {
254 289 this.indexWay = e.detail.value
255 290 },
256 291 bindStartDateChange: function (e) {
257   - this.benginDate = e.detail.value
  292 + this.beginTime = e.detail.value
258 293 },
259 294 bindEndDateChange: function (e) {
260   - this.overDate = e.detail.value
  295 + this.endTime = e.detail.value
261 296 },
262 297 getDate(type) {
263 298 const date = new Date();
... ... @@ -296,7 +331,7 @@ export default {
296 331 justify-content: space-between;
297 332 }
298 333  
299   - .paddingRight{
  334 + .paddingRight {
300 335 padding-right: 20px;
301 336 }
302 337 </style>
... ...