详情页修改

components/activity/sku.ttss

@@ -205,9 +205,9 @@
 }
 
 .notSelectCity {
-  background: #f5f5f5;
-  border-color: #f5f5f5 !important;
-  color: #4e4e4e;
+  background: #f5f5f4;
+  border-color: #f5f5f4 !important;
+  color: #a3a3a3;
 }
 
 .sku-column-body .sku-row__item--active .sessions-title {

pages/product/activity/index.ttml

@@ -151,14 +151,24 @@
     <scroll-view scroll-x="true" class="sku borderRadiu" scroll-with-animation="true">
       <view class="sku-boxs">
         <!-- 城市状态开售中   活动状态开售中 -->
-        <view class="sku-box " tt:for="{{datas.cityVOList}}" tt:key="city" data-index="{{index}}"
-          bindtap="{{item.status==1&&datas.timeStatus==1?'goPay':''}}" data-item="{{item}}" data-alone="0">{{item.city}}
-          <view style="margin-top: 10rpx;">
-            <text tt:if="{{item.status==0}}" class="font12 ">未开售
-            </text> <text tt:elif="{{item.status==1}}" class="font12 orange">开售中
-            </text> <text tt:elif="{{item.status==2}}" class="font12 ">已停售
-            </text><text tt:else class="font12 ">已满额
-            </text>
+        <view style="display: flex;">
+          <view tt:for="{{datas.cityVOList}}" tt:key="city" data-index="{{index}}"
+            bindtap="{{item.status==1&&datas.timeStatus==1?'goPay':''}}" data-item="{{item}}" data-alone="0"
+            class="cityItem" tt:if="{{index<3}}">
+            <view class="sku-box {{item.status==1&&datas.timeStatus==1?'canBlack':''}}">
+              <view>{{item.city}}</view>
+            </view>
+            <view class="cityStatus">
+              <text tt:if="{{item.status==0}}" class="font10 gray71">未开售
+              </text> <text tt:elif="{{item.status==1}}" class="font10 orange">开售中
+              </text> <text tt:elif="{{item.status==2}}" class="font10 gray71">已停售
+              </text><text tt:else class="font10 gray71">已满额
+              </text>
+            </view>
+          </view>
+        </view>
+        <view class="font12 cityMore" bindtap="goPay">
+          共{{datas.cityVOList.length}}个城市可选 <view style="margin-right: 20rpx;color: #a3a3a3;" class="brillianticon">
           </view>
         </view>
       </view>

pages/product/activity/index.ttss

@@ -33,6 +33,7 @@ page {
   font-size: 24rpx;
   color: #EE3A43;
 }
+
 .tag::-webkit-scrollbar {
   width: 0;
   height: 0;
@@ -224,8 +225,9 @@ page {
   font-size: 36rpx;
   margin-right: 20rpx;
 }
-.mapTo{
-  justify-content: space-between!important;
+
+.mapTo {
+  justify-content: space-between !important;
   align-items: center;
 }
 
@@ -527,7 +529,7 @@ page {
 }
 
 .comment {
-  padding:20rpx 20rpx;
+  padding: 20rpx 20rpx;
 }
 
 .scoreBox {
@@ -1065,11 +1067,12 @@ page {
 .sku {
   margin-bottom: 20rpx;
 }
+
 scroll-view ::-webkit-scrollbar {
-  display:none;
-  width:0;
-  height:0;
-  color:transparent;
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
 }
 
 
@@ -1077,27 +1080,53 @@ scroll-view ::-webkit-scrollbar {
   width: 100%;
   display: flex;
   flex-direction: row;
-  overflow-x: auto;
+  /* overflow-x: auto; */
+  align-items: end;
+  justify-content: space-between;
+}
+
+.sku-boxs .cityItem {
+  position: relative;
+  padding: 20rpx 20rpx 0rpx 0;
+  display: flex;
+}
+
+.cityItem .cityStatus {
+  position: absolute;
+  top: -15rpx;
+  right: 15rpx;
 }
 
 .sku-box {
   border-radius: 16rpx;
-  color: #717071;
-  font-size: 32rpx;
-  padding: 20rpx;
+  color: #a3a3a3;
+  font-size: 28rpx;
+  padding: 20rpx 20rpx;
   text-align: center;
   display: inline-block;
-  margin-left: 15rpx;
+  /* margin-left: 15rpx; */
   background: #f5f5f4;
   display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  min-width: 220rpx;
+  /* flex-direction: column;
+  flex-shrink: 0; */
+  align-items: center;
+  justify-content: center;
+  min-width: 110rpx;
   border: 1px solid #f0f0ec;
 }
 
-.sku-box:first-child {
-  margin-left: 0;
+.cityMore {
+  display: flex;
+  align-items: center;
+  color: #a3a3a3 !important;
+}
+
+.canBlack {
+  color: #000;
+}
+
+.sku-boxs:first-child {
+  margin-left: 0 !important;
 }
 
 .disabled {
@@ -1138,10 +1167,22 @@ scroll-view ::-webkit-scrollbar {
 }
 
 .orange {
-  color: #ff7e8d;
-  /* border: 1rpx solid #ff7e8d; */
+  color: #fff;
+  border: 1rpx solid #ff7e8d;
+  background-color: #ff7e8d;
   padding: 0 10rpx;
   border-radius: 20rpx;
+  border-bottom-left-radius: 0;
+
+}
+
+.gray71 {
+  color: #fff;
+  border: 1rpx solid #c7c3c3;
+  background-color: #c7c3c3;
+  padding: 0 5rpx;
+  border-radius: 20rpx;
+  border-bottom-left-radius: 0;
 }
 
 .green {
@@ -1280,7 +1321,7 @@ scroll-view ::-webkit-scrollbar {
 .buttom1 {
   width: 158rpx;
   height: 47rpx;
-  background-color: #ee3a43 ;
+  background-color: #ee3a43;
   display: flex;
   justify-content: center;
   align-items: center;