首页基本完成

2020-06-09 14:29:43 +08:00
parent 63f21c3021
commit 2f123fbb48
7 changed files with 368 additions and 2 deletions
--- a/pageB/photo/index.vue
+++ b/pageB/photo/index.vue
@@ -0,0 +1,122 @@
+<template>
+    <view class="photo">
+        <view class="back">
+            <image></image>
+        </view>
+        <swiper class="swiper">
+            <swiper-item>
+                <image></image>
+            </swiper-item>
+            <swiper-item>
+                <image></image>
+            </swiper-item>
+            
+        </swiper>
+        <view class="bottom">
+            <view class="item">
+                <text>图片</text>
+                <view v-for="(item,index) in 4" :key="index" :style="{'background-color':index == 2 ? '#fff' : '#ede8e8'}"></view>
+            </view>
+            <view class="username">自己黑的哈万岁哦划u将</view>
+            <view class="title">hasjdhajskhj</view>
+            <view class="info u-line-2">asdjhasjdkasljdklasjkl</view>
+        </view>
+        <userinfo class="userinfo"></userinfo>
+        <shpoone class="shpoone"></shpoone>
+        <shoplist></shoplist>
+    </view>
+</template>
+<style lang="scss" scoped>
+.photo{
+    height: 100vh;
+    background-color: #ececec;
+    width: 100%;
+    .back{
+        padding-top: 28rpx;
+        padding-right: 31rpx;
+        >image{
+            width: 31rpx;
+            height: 31rpx;
+            float: right;
+        }
+    }
+    .swiper{
+        width: 100%;
+        height: 702rpx;
+        margin-top: 102rpx;
+        image{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .bottom{
+        width: 100%;
+        height: 270rpx;
+        background-color: #fff;
+        position: fixed;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 20rpx 30rpx;
+        .item{
+            padding: 8rpx 16rpx;
+            font-size: 24rpx;
+            color: #fff;
+            background-color: #999;
+            display: flex;
+            align-items: center;
+            border-radius: 10rpx;
+            >view{
+                width: 12rpx;
+                height: 12rpx;
+                border-radius: 50%;
+                margin-left: 10rpx;
+            }
+        }
+        .username{
+            font-size: 36rpx;
+            color: #333;
+            margin-top: 20rpx;
+
+        }
+        .title{
+            font-size: 26rpx;
+            color: #333;
+            margin-top: 23rpx;
+        }
+        .info{
+            font-size: 28rpx;
+            line-height: 42rpx;
+            margin-top: 20rpx;
+        }
+    }
+    .userinfo{
+        position: absolute;
+        top: 50%;
+        transform: translateY(-285rpx);
+        right: 30rpx;
+    }
+    .shpoone{
+        position: absolute;
+        top: 50%;
+        z-index: 999;
+        right: 139rpx;
+        transform: translateY(100rpx);
+    }
+}
+</style>
+<script>
+import userinfo from "../components/userinfo/index"
+import shpoone from "../components/shpoone/index"
+import shoplist from "../components/shoplist/index"
+
+export default {
+    name:"photo",
+    components:{
+        userinfo,
+        shpoone,
+        shoplist
+    }
+}
+</script>