底部样式

components/bottomForm.vue

@@ -0,0 +1,24 @@
+<template>
+    <view>
+        <bottom1 />
+        <bottom2 />
+    </view>
+</template>
+
+<script>
+import bottom1 from "./bottomModules/bottom1.vue"
+import bottom2 from "./bottomModules/bottom2.vue"
+export default {
+    components: {
+        bottom1,
+        bottom2
+    },
+    data() {
+        return {
+
+        }
+    },
+}
+</script>
+
+<style></style>

components/bottomModules/bottom2.vue

@@ -0,0 +1,209 @@
+<template>
+    <view class="box">
+        <view class="title">
+            免费帮您获取装修预算
+        </view>
+        <view class="total">
+            今日已有 <text class="num">258</text>位业主申请
+        </view>
+        <view class="input-box" hover-class="navigator-hover" @click="showBathroom = true">
+            <input type="digit" @input="onInput" placeholder="您房子的面积是多少？" style="color: #fff;"
+                placeholder-class="placeholder" />
+            <text class="unit">
+                m²
+            </text>
+        </view>
+        <view class="input-box" hover-class="navigator-hover" @click="showBathroom = true">
+            <view class="value">
+                {{ submitData.bathroom }}
+            </view>
+            <text class="iconfont icon-a-wodetiaozhuan" />
+        </view>
+        <u-action-sheet :actions="bathroomList" :show="showBathroom" cancelText="取消" @close="showBathroom = false"
+            @select="onSelect($event, 'bathroom')" />
+
+        <view class="input-box" hover-class="navigator-hover" @click="showWall = true">
+            <view class="value">
+                {{ submitData.wall }}
+            </view>
+            <text class="iconfont icon-a-wodetiaozhuan" />
+        </view>
+
+        <u-action-sheet :actions="wallList" :show="showWall" cancelText="取消" @close="showWall = false"
+            @select="onSelect($event, 'wall')" />
+
+        <view class="radio-box">
+            <u-radio-group v-model="submitData.type">
+                <u-radio v-for="item in radioList" style="margin-right: 20px;" :key="item.name" activeColor="#E3041F"
+                    labelColor="#FFFFFF" :customStyle="item.customStyle" :labelSize="tovw(14)" :label="item.name"
+                    :name="item.name" />
+            </u-radio-group>
+        </view>
+        <view class="submit" hover-class="navigator-hover">
+            立即估算报价 <text class="iconfont icon-a-wodetiaozhuan" />
+        </view>
+        <view class="evenMore">
+            更多阳台空间、全屋顶墙柜门等报价，请咨询当地专卖店
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "bottom2",
+    data() {
+        return {
+            submitData: {
+                "area": "100",
+                "wall": "1个背景墙",
+                "bathroom": "1厨1卫",
+                "type": "毛坯房装修"
+            },
+            radioList: [{
+                name: "毛坯房装修",
+                customStyle: { marginRight: this.tovw(26) }
+            }, {
+                name: "旧房装修",
+                customStyle: { marginRight: this.tovw(26) }
+            }, {
+                name: "精装房焕新"
+            }],
+            showWall: false,
+            showBathroom: false,
+            bathroomList: [{
+                name: '0厨0卫',
+            }, {
+                name: '1厨1卫',
+            }, {
+                name: '1厨2卫',
+            }, {
+                name: '1厨3卫',
+            }, {
+                name: '1厨>3卫',
+            }],
+            wallList: [{
+                name: '0个背景墙',
+            }, {
+                name: '1个背景墙',
+            }, {
+                name: '2个背景墙',
+            }, {
+                name: '3个背景墙',
+            }, {
+                name: '>3个背景墙',
+            }]
+        }
+    },
+    methods: {
+        onSelect({ name }, key) {
+            this.submitData[key] = name;
+        },
+        onInput(e) {
+            this.submitData.area = e.detail.value;
+            console.log("submitData", this.submitData)
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100vw;
+    padding: 30px 0;
+    background: radial-gradient(100% 0% at 50% 50%, #7E7E7E 0%, #787878 100%);
+
+    /deep/.placeholder {
+        color: #fff;
+        opacity: .6;
+    }
+
+    .title {
+        line-height: 22px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #FFFFFF;
+        letter-spacing: 1px;
+    }
+
+    .total {
+        line-height: 17px;
+        font-family: PingFang SC, PingFang SC;
+        font-size: 12px;
+        color: #FFFFFF;
+        margin-top: 5px;
+        letter-spacing: 1.5px;
+
+        .num {
+            color: #FC9228;
+            padding: 0 5px;
+            letter-spacing: 0px;
+        }
+    }
+
+    .input-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 315px;
+        height: 45px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 2px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        box-sizing: border-box;
+        padding: 0 10px;
+        margin-top: 10px;
+
+        .value {
+            color: #FFFFFF;
+            font-size: 14px;
+        }
+
+        .iconfont {
+            color: #FFFFFF;
+            transform: rotate(90deg);
+        }
+
+        .unit {
+            color: #FFFFFF;
+        }
+    }
+
+    .radio-box {
+        height: 20px;
+        line-height: 20px;
+        margin-top: 20px;
+    }
+
+    .submit {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 315px;
+        height: 45px;
+        background: #FC9228;
+        border-radius: 2px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 14px;
+        color: #FFFFFF;
+        margin-top: 20px;
+
+        .iconfont {
+            font-size: 12px;
+            margin-left: 4px;
+        }
+    }
+
+    .evenMore {
+        margin-top: 10px;
+        line-height: 17px;
+        font-family: PingFang SC, PingFang SC;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.8);
+    }
+}
+</style>

main.js

@@ -25,8 +25,8 @@ import my_form from './components/my_form.vue';
 Vue.component("my_form", my_form);
 import My_upload from './components/my-upload.vue';
 Vue.component("My_upload", My_upload);
-
-
+import bottomForm from './components/bottomForm.vue';
+Vue.component("bottomForm", bottomForm);
 
 
 //挂载接口

packageCase/imgs/detail.vue

@@ -56,7 +56,6 @@
             </view>
         </view>
         <storeInfo />
-        <bottom1 />
         <view style="position: absolute;z-index: -999;top: 0;">
             <l-painter ref="painter" hidden css="padding:10px;background:#fff;width: 148px;">
                 <l-painter-view>
@@ -69,6 +68,7 @@
                 </l-painter-view>
             </l-painter>
         </view>
+        <bottomForm />
     </My_listbox>
 </template>
 

team/userCenter/personal.vue

@@ -154,9 +154,11 @@ export default {
             font-family: Source Han Sans SC, Source Han Sans SC;
             font-size: 14px;
             color: #666666;
+            flex-shrink: 0;
         }
 
         .value {
+            flex: 1;
             line-height: 20px;
             font-family: Source Han Sans SC, Source Han Sans SC;
             font-size: 14px;