Skip to content

S
shop_mobile_uni
Commit 6648a5bd authored by 王建威's avatar 王建威
Browse files
Options

页面

parent 0470faea
Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 35 deletions
.DS_Store 0 → 100644
View file @ 6648a5bd
File added
pages.json
View file @ 6648a5bd
...@@ -11,6 +11,6 @@ ...@@ -11,6 +11,6 @@
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8" "backgroundColor": "#fbfbfb"
} }
} }
pages/.DS_Store 0 → 100644
View file @ 6648a5bd
File added
pages/index/index.vue
View file @ 6648a5bd
<template> <template>
<view class="content"> <view>
<image class="logo" src="/static/logo.png"></image> <view class="content">
<view class="text-area"> <view class="flex">
<text class="title">{{title}}</text> <view class="search_view flex">
</view> <i class="search_icon"></i>
<input type="text" class="search_input">
</view>
<text class="login_btn">登录</text>
</view>
<view class="flex tab_bar">
<text :class="{act: tabIndex === 1}" @click="changeTab(1)">首页</text>
<text :class="{act: tabIndex === 2}" @click="changeTab(2)">精彩活动</text>
<text :class="{act: tabIndex === 3}" @click="changeTab(3)">谛宝白条</text>
<text :class="{act: tabIndex === 4}" @click="changeTab(4)">采购分期</text>
</view>
</view>
<view class="backimg">
<view class="main_content">
<view class="part_one">
<view>
<text class="text">白条商品</text>
<i></i>
<text class="text">信用支付 帐期无忧</text>
</view>
<view class="flex classbox">
<view class="class_item">
<image src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20190723/goods/5d367110e1741.jpeg?x-oss-process=image/resize,m_lfit,w_750,h_750/auto-orient,0/quality,Q_85/format,jpg"></image>
<text class="class_name">分类名称</text>
</view>
</view>
</view>
<view class="part_two">
<image class="portrait" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20190723/goods/5d367110e1741.jpeg?x-oss-process=image/resize,m_lfit,w_750,h_750/auto-orient,0/quality,Q_85/format,jpg"></image>
<text class="user_name">Hi, 谛宝多多</text>
<text class="go_credit"><text>我的白条</text><i class="go_credit_icon"></i></text>
</view>
<view class="part_three">
<view class="part_three_top">
<view>
<p>谛宝多多 帐期无忧</p>
<p>最高可享12期免息</p>
</view>
<text class="go_detail">查看详情<i class="go_credit_icon"></i></text>
</view>
<view class="part_three_bottom">
<view class="hot_goods">
<image src="/static/index/28x28icon_sousuo@3x.png"></image>
<p>DBC核磁</p>
<text>9个月账期</text>
</view>
</view>
</view>
<view class="part_four">
<p>白条精品 猜你需要</p>
<view class="needs_tabs">
<text class="tabs_item_first"><text>a</text></text>
<text class="tabs_item"><text>a</text></text>
<text class="tabs_item_last"><text>a</text></text>
</view>
<view>
<view class="goods_info">
<image src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20190723/goods/5d367110e1741.jpeg?x-oss-process=image/resize,m_lfit,w_750,h_750/auto-orient,0/quality,Q_85/format,jpg"></image>
<text class="goods_name">xxxxxxxx</text>
<view class="goods_tag">
<text>限时免息</text>
<text>9个月账期</text>
</view>
<text class="goods_des">套餐包含：激光体厚尺1台，内窥镜仪器1台，输液泵一大萨达大多</text>
<view class="price_view">
<text>￥1000</text>
<i></i>
</view>
</view>
</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
...@@ -11,42 +83,372 @@ ...@@ -11,42 +83,372 @@
export default { export default {
data() { data() {
return { return {
title: 'Hello' tabIndex: 1, // 1:首页 2:精彩活动 3:谛宝白条 4:采购分期
} }
}, },
onLoad() { onLoad() {
}, },
methods: { methods: {
changeTab(index) {
this.tabIndex = index;
}
} }
} };
</script> </script>
<style> <style lang="less">
.content { .flex {
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
} }
.content {
.title { height: 180rpx;
font-size: 36rpx; background: #fff;
color: #8f8f94; justify-content: space-between;
padding: 24rpx;
box-sizing: border-box;
}
.search_view {
width: 380rpx;
height: 60rpx;
background: #F5F5F5;
border-radius: 30rpx;
}
.search_icon {
display: inline-block;
width: 56rpx;
height: 56rpx;
background: url(/static/index/28x28icon_sousuo@3x.png) no-repeat;
background-size: 100% 100%;
}
.search_input {
height: 60rpx;
}
.login_btn {
width: 92rpx;
height: 60rpx;
line-height: 60rpx;
background: #FFCD00;
border-radius: 16rpx;
color: #212121;
font-size: 28rpx;
text-align: center;
}
.tab_bar {
padding: 0 24rpx;
justify-content: space-between;
margin-top: 34rpx;
}
.tab_bar text {
font-size: 28rpx;
color: #212121;
line-height: 40rpx;
}
.tab_bar .act {
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
font-size: 32rpx;
position: relative;
}
.tab_bar .act:after {
position: absolute;
width: 60rpx;
height: 4rpx;
background: #FFCD00;
border-radius: 0 2rpx 2rpx 2rpx;
content: '';
left: 50%;
margin-left: -30rpx;
top: 48rpx;
}
.backimg {
height: 678rpx;
background: red;
padding-top: 0.5px;
}
.main_content {
width: 93.6%;
margin: 308rpx auto 0;
}
.part_one {
padding: 36rpx 40rpx 0;
border-radius: 16rpx;
background: #fff;
}
.part_one .text:nth-of-type(1) {
font-size: 36rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
line-height: 50rpx;
vertical-align: middle;
}
.part_one .text:nth-of-type(2) {
color: #7c7c7c;
font-size:24rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
line-height: 34rpx;
vertical-align: middle;
}
.part_one i {
display: inline-block;
width: 2rpx;
height: 20rpx;
background: #979797;
margin: 0 12rpx;
vertical-align: middle;
}
.classbox {
justify-content: space-between;
flex-wrap: wrap;
margin-top: 22rpx;
box-shadow:0px 4px 16px 0px rgba(0,0,0,0.03);
}
.classbox image {
display: block;
width: 100rpx;
height: 96rpx;
border-radius: 50%;
}
.classbox .class_name {
font-size: 22rpx;
line-height: 32rpx;
}
.part_two {
box-shadow:0px 4px 10px 0px rgba(0,0,0,0.05);
border-radius:16rpx;
padding: 26rpx;
background: #fff;
margin-top: 20rpx;
}
.part_two .portrait {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
vertical-align: middle;
}
.part_two .user_name {
font-size: 32rpx;
font-weight: 600;
vertical-align: middle;
margin: 0 200rpx 0 16rpx;
}
.go_credit {
display: inline-block;
width: 160rpx;
height: 56rpx;
border-radius: 28rpx;
background: #D6C453;
color: #fff;
text-align: center;
line-height: 56rpx;
font-size: 26rpx;
vertical-align: middle;
padding-left: 10rpx;
}
.go_credit_icon {
display: inline-block;
width: 32rpx;
height: 32rpx;
background: url(/static/common/icon_next_small%20heise@2x.png) no-repeat;
background-size: 100% 100%;
position: relative;
top: 6rpx;
}
.part_three {
height: 522rpx;
border-radius:16rpx;
padding: 0 22rpx;
background: red;
box-shadow:0px 12rpx 20rpx 0px rgba(0,0,0,0.05);
margin-top: 20rpx;
padding-top: 0.5px;
.part_three_top {
display: flex;
justify-content: space-between;
margin-top: 32rpx;
align-items: center;
p:nth-of-type(1) {
color: #2E344C;
font-size: 36rpx;
font-family:AlibabaPuHuiTiB;
line-height: 50rpx;
font-weight: bold;
}
p:nth-of-type(2) {
font-size: 32rpx;
line-height: 44rpx;
color: #2E344C;
}
.go_detail {
background:rgba(0,0,0,0.5);
width: 148rpx;
height: 46rpx;
border-radius: 23rpx;
color: #fff;
font-size: 24rpx;
line-height: 46rpx;
text-align: center;
padding-left: 10rpx;
}
}
.part_three_bottom {
display: flex;
justify-content: space-between;
.hot_goods {
width: 212rpx;
height: 332rpx;
background: #fff;
border-radius: 16rpx;
margin-top: 44rpx;
text-align: center;
image {
width: 212rpx;
height: 212rpx;
}
}
p {
font-size: 26rpx;
line-height: 36rpx;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 8rpx auto 0;
}
text {
border: 1px solid #C7B64E;
height: 36rpx;
line-height: 36rpx;
border-radius: 18rpx;
padding: 0 12rpx;
font-size: 22rpx;
color: #C7B64E;
position: relative;
top: -10rpx;
}
}
}
.part_four {
margin-top: 40rpx;
> p {
font-size: 32rpx;
height: 44rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin-bottom: 24rpx;
}
.needs_tabs {
height: 64rpx;
overflow: auto;
margin-bottom: 20rpx;
display: flex;
> text {
height: 64rpx;
line-height: 64rpx;
text-align: center;
background: #ECECEC;
display: inline-block;
width: 220rpx;
margin-right: 20rpx;
position: relative;
text {
display: block;
transform: skew(30deg);
}
}
.tabs_item_first {
border-radius: 32rpx 16rpx 16rpx 32rpx;
transform: skew(-30deg);
}
.tabs_item_first:after {
position: absolute;
left: 0;
top: 0;
content: '';
height: 64rpx;
width: 64rpx;
border-radius: 32rpx 0 0 32rpx;
background: #ECECEC;
transform: skew(30deg);
}
.tabs_item {
border-radius: 16rpx;
transform: skew(-30deg);
}
.tabs_item_last {
border-radius: 16rpx 32rpx 32rpx 16rpx;
transform: skew(-30deg);
}
}
.goods_info {
width: 346rpx;
height: 600rpx;
padding: 32rpx;
box-sizing: border-box;
image {
width: 280rpx;
height: 280rpx;
}
.goods_name {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 26rpx;
color: #212121;
line-height: 38rpx;
display: block;
}
.goods_tag {
display: block;
text {
display: inline-block;
vertical-align: middle;
border: 1px solid #C7B64E;
color: #C7B64E;
height: 36rpx;
line-height: 36rpx;
padding: 0 12rpx;
border-radius: 18rpx;
font-size: 22rpx;
margin-right: 8rpx;
}
}
.goods_des {
height: 64rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #7C7C7C;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 12rpx;
}
.price_view {
display: flex;
justify-content: space-between;
align-items: center;
height: 56rpx;
margin-top: 10rpx;
text {
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color: #000;
font-size: 32rpx;
line-height: 44rpx;
}
i {
display: inline-block;
width: 56rpx;
height: 56rpx;
background: url(/static/common/icon_gouwuche@2x.png) no-repeat;
background-size: 100% 100%;
}
}
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment