弹窗优化

2020-07-06 11:42:12 +08:00
parent 709a315403
commit d94fb80ee2
2 changed files with 74 additions and 44 deletions
--- a/pageB/components/sdetails/guige.vue
+++ b/pageB/components/sdetails/guige.vue
@@ -0,0 +1,55 @@
+<template>
+     <view class="guige">
+        <view class="title">
+            选择尺码
+        </view>
+        <view class="item">
+            <text>均码</text>
+            <text :class="select == 1 ? 'xuanzhong' : ''">S</text>
+            <text>M</text>
+        </view>
+    </view>
+</template>
+<style lang="scss" scoped>
+    .guige{
+            margin-top: 30rpx;
+            padding-bottom: 30rpx;
+            border-bottom: #ececec solid 2rpx;
+            .title{
+                font-size: 28rpx;
+                color: #333;
+                margin-bottom: 29rpx;
+
+            }
+            .item{
+                display: flex;
+                flex-wrap: wrap;
+                >text{
+                    min-width: 120rpx;
+                    height: 60rpx;
+                    background-color: #ececec;
+                    color: #999;
+                    text-align: center;
+                    line-height: 60rpx;
+                    box-sizing: border-box;
+                    border-radius: 6rpx;
+                    margin-right: 26rpx;
+                }
+                .xuanzhong{
+                    border: #ff780f 1rpx solid;
+                    color: #FF780F;
+                    background-color: #FFF1E6;
+                }
+            }
+        }
+</style>
+<script>
+export default {
+    name:"guige",
+    data(){
+        return {
+            select:true
+        }
+    }
+}
+</script>