Skip to content

T
TripFriend
Commit 705fb78e authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

update

parent c2c4e7dd
Hide whitespace changes
Inline Side-by-side
Showing with 412 additions and 12 deletions
app.json
View file @ 705fb78e
{
"pages": [
"pages/msg/index",
"pages/index/index",
"pages/welcome/welcome",
"pages/validateForm/validate/validate",
"pages/validateForm/validateEnd/validateEnd",
"pages/logs/logs",
"pages/video/index",
"pages/me/index",
"pages/validateForm/validateEnd/validateEnd",
"pages/validateForm/validate/validate",
"pages/video/index"
"pages/welcome/welcome",
"pages/msg/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
......
app.wxss
View file @ 705fb78e
......@@ -8,3 +8,36 @@
padding: 200rpx 0;
box-sizing: border-box;
}
.f40{
font-size: 40rpx;
}
.f20{
font-size: 20rpx;
}
.f24{
font-size: 24rpx;
}
.f22{
font-size: 22rpx;
}
.c11{
color:#111111;
}
.c99{
color:#999999;
}
.text1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.text2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
\ No newline at end of file
pages/index/index.js
View file @ 705fb78e
//index.js
//获取应用实例
const app = getApp()
......@@ -7,7 +8,12 @@ Page({
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
canIUse: wx.canIUse('button.open-type.getUserInfo'),
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500
},
//事件处理函数
bindViewTap: function() {
......
pages/index/index.json
View file @ 705fb78e
{
"usingComponents": {}
"usingComponents": {},
"navigationBarTitleText": "首页",
"navigationStyle": "custom"
}
\ No newline at end of file
pages/index/index.wxml
View file @ 705fb78e
<!--index.wxml-->
<view class="container">
<!-- <view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
......@@ -10,4 +10,145 @@
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
</view> -->
<!-- // -->
<view class="Index">
<view class="titleContent">
<view class="f40" style="font-weight:600">京东北海道新系列</view>
<view class="f20">尊敬的客户您好，请进行您的身份识别</view>
<text class="qhd">去核对</text>
</view>
<view class="headView">
<scroll-view scroll-x class="scroll-header">
<view class="scroll-view-item">
<view class="cityView">
<view style="font-size:30rpx">日本</view>
<view style="font-size:26rpx">
<image src="../../images/index/all.png"></image>
5分
</view>
</view>
</view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
</scroll-view>
</view>
<view class="timeView">
<view style="font-size:30rpx;font-weight:700">重要时间</view>
<swiper class="swiper-box" style="height:240rpx" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block>
<swiper-item>
<view class="item">
<view class="itemView">
<image style="width:44rpx;height:44rpx" src="../../images/index/time.png"></image>
<text class="title">集合时间</text>
<text class="right">2020-03-15 09:00</text>
</view>
<view class="itemView">
<image style="width:44rpx;height:44rpx" src="../../images/index/hb.png"></image>
<text class="title">航班信息</text>
<text class="right">2020-03-15 09:00</text>
</view>
<view class="itemView">
<image style="width:44rpx;height:44rpx" src="../../images/index/hbsj.png"></image>
<text class="title">航班时间</text>
<text class="right">2020-03-15 09:00</text>
</view>
</view>
</swiper-item>
</block>
<block>
<swiper-item>
<view class="item">
<view class="itemView">
<image style="width:44rpx;height:44rpx" src="../../images/index/time.png"></image>
<text class="title">集合时间</text>
<text class="right">2020-03-15 09:00</text>
</view>
<view class="itemView">
<image style="width:44rpx;height:44rpx" src="../../images/index/hb.png"></image>
<text class="title">航班信息</text>
<text class="right">2020-03-15 09:00</text>
</view>
<view class="itemView">
<image style="width:44rpx;height:44rpx" src="../../images/index/hbsj.png"></image>
<text class="title">航班时间</text>
<text class="right">2020-03-15 09:00</text>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view class="ContactView">
<view style="font-size:30rpx;font-weight:700;padding-left:30rpx">重要联系人</view>
<scroll-view scroll-x class="scroll-header">
<view class="scroll-view-item">
<view>
<image src="../../images/index/hb.png"></image>
</view>
<view class="f24 c11">黄媛媛</view>
<view style="padding:15rpx 0" class="f22 c99">领队</view>
<view class="fgView"></view>
</view>
</scroll-view>
</view>
<view class="XcView">
<view style="font-size:30rpx;font-weight:700;padding-left:30rpx">行程概览</view>
<scroll-view scroll-x class="scroll-header">
<view class="scroll-view-item">
<view>
<image src="../../images/index/hb.png"></image>
</view>
<view class="f24 c11">黄媛媛</view>
<view style="padding:15rpx 0" class="f22 c99">领队</view>
<view class="fgView"></view>
</view>
</scroll-view>
</view>
<!-- 今日游玩 -->
<view class="toDayView">
<view style="font-size:30rpx;font-weight:700;padding-left:30rpx">今日游玩</view>
<view class="ListItem">
<view class="imgLeft">
<image src="../../images/index/hb.png"></image>
</view>
<view class="right">
<view class="text2 c11 f30">今日游玩的城市介绍都在这里啦！</view>
<view style="margin:15rpx 0" class="text1 c99 f24">打卡京东、京都、名古屋、秋叶,打卡京东、京都、名古屋、秋叶</view>
<view style="text-align:right;margin-top:20rpx">
<text class="daka">打卡</text>
<text class="yidaka">已打卡</text>
</view>
</view>
</view>
</view>
<!-- 商品推荐 -->
<view class="toDayView" style="margin-top:20rpx">
<view style="font-size:30rpx;font-weight:700;padding-left:30rpx">商品推荐</view>
<view class="ListItem">
<view class="imgLeft">
<image src="../../images/index/hb.png"></image>
</view>
<view class="right">
<view class="text1 c11 f30">日本花王尿不湿 XL48片</view>
<view class="labelItem" style="margin:15rpx 0">
<text>12-17</text>
</view>
<view style="color:#FB211E;margin-top:30rpx">
<text class="f22">￥</text>
<text class="f32">105</text>
</view>
<view class="f20 c99">
评价或者店铺或者其他什么吧
</view>
</view>
</view>
</view>
<view>
</view>
</view>
\ No newline at end of file
pages/index/index.wxss
View file @ 705fb78e
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
......@@ -18,4 +19,218 @@
.usermotto {
margin-top: 200px;
}
\ No newline at end of file
}
.titleContent{
padding: 0 30rpx;
box-sizing: border-box;
position: relative;
margin-top:150rpx;
}
.titleContent .qhd{
position: absolute;
border: 2rpx solid #FF3166;
color: #FF3166;
right: 30rpx;
top: 15rpx;
display: inline-block;
width:128rpx;
height:60rpx;
line-height:60rpx;
border-radius:30rpx;
text-align: center;
font-size: 24rpx;
}
.Index .titleView {
font-size: 34rpx;
text-align: center;
}
.headView .scroll-header {
display: flex;
white-space: nowrap;
padding: 30rpx;
box-sizing: border-box;
}
.headView .scroll-header .scroll-view-item {
height: 390rpx;
width:604rpx;
border: 1px solid red;
display: inline-block;
position: relative;
margin-right: 30rpx;
}
.headView .scroll-header .scroll-view-item:last-child{
margin-right: 0;
}
.headView .scroll-view-item .cityView{
position: absolute;
bottom: 24rpx;
width: 100%;
padding: 30rpx 30rpx 0 30rpx;
box-sizing: border-box;
/* color:#fff; */
}
.headView .scroll-view-item .cityView image{
width:24rpx;
height: 24rpx;
}
.timeView{
padding: 0 30rpx;
box-sizing: border-box;
}
.timeView .item .itemView{
display: flex;
align-items: center;
margin-top:20rpx;
position: relative;
}
.timeView .item .title{
font-size: 24rpx;
color:#999999;
margin-left: 25rpx;
}
.timeView .item .right{
font-size: 26rpx;
color:#111111;
position: absolute;
right: 0;
}
.swiper-box .wx-swiper-dot{
width:10rpx;
height:6rpx;
display: inline-flex;
margin-left: 6rpx;
justify-content:space-between;
}
.swiper-box .wx-swiper-dot::before{
content: '';
flex-grow: 1;
background:rgba(204,204,204,1);
border-radius: 3rpx;
}
.swiper-box .wx-swiper-dot-active{
width:40rpx!important;
}
.swiper-box .wx-swiper-dot-active::before{
background:rgba(255,49,102,1);
}
/* 联系人 */
.ContactView .scroll-header {
display: flex;
white-space: nowrap;
padding: 30rpx;
box-sizing: border-box;
}
.ContactView .scroll-header .scroll-view-item {
display: inline-flex;
position: relative;
margin-right: 25rpx;
width:210rpx;
height:240rpx;
background:rgba(255,255,255,1);
box-shadow:0px 4rpx 10rpx 0px rgba(207,207,207,0.2);
border-radius:20rpx;
align-items: center;
justify-content: center;
flex-direction: column;
}
.ContactView .scroll-header .scroll-view-item:last-child{
margin-right: 0;
}
.ContactView .scroll-header .scroll-view-item image{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
.ContactView .fgView{
width:120rpx;
height:6rpx;
background:rgba(255,49,102,1);
border-radius:3rpx;
}
/* 行程概览 */
.XcView .scroll-header {
display: flex;
white-space: nowrap;
padding: 30rpx;
box-sizing: border-box;
}
.XcView .scroll-header .scroll-view-item {
display: inline-flex;
position: relative;
margin-right: 30rpx;
width:300rpx;
height:140rpx;
border-radius:20rpx;
align-items: center;
justify-content: center;
flex-direction: column;
}
.XcView .scroll-header .scroll-view-item:last-child{
margin-right: 0;
}
.toDayView .ListItem{
position: relative;
padding: 30rpx;
box-sizing: border-box;
border-bottom: 1px solid #E2E2E2;
min-height: 300rpx;
}
.toDayView .ListItem:last-child{
border: none;
}
.toDayView .ListItem .imgLeft{
position: absolute;
width:200rpx;
height:260rpx;
border-radius:20rpx;
}
.toDayView .ListItem .imgLeft image{
width: 100%;
height: 100%;
}
.toDayView .ListItem .right{
width: 100%;
padding-left: 230rpx;
box-sizing: border-box;
}
.toDayView .daka{
width:128rpx;
height:50rpx;
line-height:50rpx;
background:rgba(255,255,255,1);
border:2rpx solid rgba(255, 49, 102, 1);
border-radius:25rpx;
display: inline-block;
text-align: center;
font-size: 24rpx;
color:#FF3166;
}
.toDayView .yidaka{
display: inline-block;
width:128rpx;
height:50rpx;
line-height:50rpx;
background:rgba(255,255,255,1);
border:2rpx solid rgba(188, 188, 188, 1);
border-radius:25rpx;
text-align: center;
font-size: 24rpx;
}
.toDayView .labelItem text{
padding:10rpx 15rpx;
color:#999999;
font-size: 20rpx;
background: #F5F5F5;
border-radius:20rpx;
}
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