四.每日秒杀
view组件是最常用的，也是最简单的视图容器。它是一个块级容器组件，它没有特殊的功能，主要用于布局展示，是布局中最基本的UI组件。几乎所有复杂的布局都可以通过嵌套view来实现。
seckilling.wxml
<!--components/seckilling/seckilling.wxml-->
<!--每日秒杀-->
<view class="menu">每日秒杀</view>
<view class="seckill">
<view class="stage">
<view class="time">12:00</view>
<view style="color: #C81623">抢购中</view>
</view>
<view class="stage">
<view class="timeDefult">14:00</view>
<view>即将开始</view>
</view>
<view class="stage">
<view class="timeDefult">16:00</view>
<view>即将开始</view>
</view>
<view class="stage">
<view class="timeDefult">18:00</view>
<view>即将开始</view>
</view>
<view class="stage">
<view class="timeDefult">20:00</view>
<view>即将开始</view>
</view>
</view>
<view class="line"></view>seckilling.wxss
/* components/seckilling/seckilling.wxss */
.content {
font-family: "Microsoft YaHei";
}
.bg {
width: 100%;
height: 170px;
background-color: #C81623;
text-align: center;
}
.logo {
padding-top: 20px;
color: #ffffff;
}
.first {
font-size: 24px;
font-weight: bold;
}
.second {
font-size: 14px;
}
.search {
height: 40px;
width: 96%;
background-color: #ffffff;
margin: 0 auto;
margin-top: 30px;
border-radius: 50px;
line-height: 40px;
}
.search view {
text-align: center;
width: 100%;
font-size: 15px;
color: #999999;
}
.title {
padding: 10px;
font-size: 13px;
color: #999999;
}
.item {
margin-top: 10px;
font-size: 15px;
width: 24%;
display: inline-block;
margin-bottom: 20px;
}
.hr {
background: #E8E8ED;
height: 10px;
}
.menu {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
.seckill {
display: flex;
flex-direction: row;
}
.stage {
width: 25%;
text-align: center;
font-size: 12px;
}
.time {
background-color: #C81623;
width: 90%;
color: #ffffff;
height: 30px;
line-height: 30px;
border-radius: 20px;
margin-left: 5px;
}
/*.timeDefult {
background-color: #D3D3D3;
width: 90%;
color: #000000;
height: 30px;
line-height: 30px;
border-radius: 20px;
margin-left: 5px;
}*/
.timeDefult {
background-color: #f2f2f2;
width: 90%;
height: 30px;
line-height: 30px;
border-radius: 20px;
margin-left: 5px;
}
.line {
border: 1px solid #f2f2f2;
opacity: 0.5;
margin-top: 10px;
margin-bottom: 10px;
}
.list {
margin-top: 10px;
margin-bottom: 10px;
}
.good {
display: flex;
flex-direction: row;
width: 90%;
margin: 0 auto;
border: lpx solid #cccccc;
box-shadow: -3px 0px 9px #ececec,0px -3px 9px #ececec, 0px 3px 9px #ececec, 0px 0px 9px #ececec;
margin-bottom: 10px;
align-items: center;
}
.pic image {
width: 80px;
height: 100px;
padding: 10px;
}
.base-info {
font-size: 13px;
padding-top: 10px;
line-height: 20px;
}
.name {
font-size: 15px;
font-weight: bold;
color: #000000;
}
.people {
color: #555555;
margin-top: 5px;
margin-bottom: 5px;
}
.price {
font-size: 22px;
color: #E53D30;
}
.org {
text-decoration: line-through;
margin-left: 5px;
margin-right: 5px;
}
.desc {
color: #333333;
}
.sale {
display: flex;
flex-direction: row;
align-items: center;
}
.saleCount {
width: 40%;
font-size: 15px;
color: #666666;
}
.saleProjess {
width: 60%;
}
.btn {
background: #F46366;
width: 100px;
color: #ffffff;
height: 25px;
line-height: 25px;
font-size: 15px;
text-align: center;
margin-top: 10px;
border-radius: 3px;
margin-bottom: 10px;
}
.outter-hover{
all:'../SearchInput/SearchInput"'
}seckilling.js
// components/seckilling/seckilling.js
Page({
data:{
goods:[] },
search:function(){
wx.navigateTo({
url:'../search/search' }) },
onLoad:function(){ this.loadGoods();},
loadGoods:function(){
var page = this;
var goods = wx.getStorageSync("goods");
page.setData({goods:goods});
},
detail:function(e){
console.log(e);
var id = e.target.id;
console.log(id);
wx.navigateTo({url:'../detail/detail?id='+id, })
},
handmiddle: function () {
console.log("middle");
},
onShareAppMessage: function (res){
return {
title:'购物首页',
path:'/page/index/index',
success: function (res){
// 转发成功
},
fail: function (res){
//转发失败
}
}
}
})
