wxml頁面代碼
<!--pages/toupiao/xiangqing.wxml-->
<view class="xinxi">
<view class="xinxi_tupian"><image src="/tupian/01.jpg" class="xinxi_tupian_img" mode="widthFix"></image></view>
<view class="xinxi_neirong">
<view class="xinxi_neirong1">編號:001</view>
<view class="xinxi_neirong2">姓名:張山</view>
<view class="xinxi_neirong3">性別:男</view>
<view class="xinxi_neirong4">年齡:2歲</view>
</view>
</view>
<view class="toupiao">
<view class="toupiao_zuo">
<image class="toupiao_zuo1" src="/img/ren.png" mode="widthFix"></image>
<view class="toupiao_zuo2">2352 票</view>
</view>
<view class="toupiao_you">
<image class="toupiao_you1" src="/img/w3.png" mode="widthFix"></image>
<view class="toupiao_you2">投一票</view>
</view>
</view>
<view class="h15"></view>
<view class="neirong">
<view class="biaoti">萌照內容</view>
<view class="xuanyan">寶寶可愛健康又大方</view>
<view class="zhaopian">
<image src="/tupian/zp01.jpg" class="zhaopian_img" mode="widthFix"></image>
<image src="/tupian/zp02.jpg" class="zhaopian_img" mode="widthFix"></image>
<image src="/tupian/zp03.jpg" class="zhaopian_img" mode="widthFix"></image>
</view>
</view>
wxss代碼
/* pages/toupiao/xiangqing.wxss */
page{
background-color: #f8f8f8;
}
.xinxi{
padding: 10px;
display: flex;
background-color: white;
}
.xinxi_tupian{
width: 120px;
}
.xinxi_tupian_img{
width: 100%;
box-shadow: 2px 2px 3px #f2f2f2;
}
.xinxi_neirong{
flex-grow: 1;
padding-left: 10px;
color: gray;
}
.xinxi_neirong1{
padding: 0px 5px 5px 5px;
}
.xinxi_neirong2{
padding: 5px;
}
.xinxi_neirong3{
padding: 5px;
}
.xinxi_neirong4{
padding: 5px;
}
.toupiao{
display: flex;
background-color: white;
padding: 0px 10px 10px 10px;
}
.toupiao_zuo{
flex-grow: 1;
display: flex;
background-color: orange;
padding: 10px;
margin: 5px;
justify-content: center;
color: white;
border-radius: 5px;
}
.toupiao_zuo1{
width: 25px;
padding-right: 10px;
}
.toupiao_zuo2{}
.toupiao_you{
flex-grow: 1;
display: flex;
background-color: orangered;
color: white;
padding: 10px;
margin: 5px;
justify-content: center;
border-radius: 5px;
}
.toupiao_you1{
width: 25px;
padding-right: 10px;
}
.toupiao_you2{}
.h15{
height: 15px;
}
.neirong{
padding: 5px;
background-color: white;
}
.biaoti{
color: orangered;
font-weight: bold;
border-top: 3px solid orangered;
padding: 5px;
border-bottom: 1px dotted gainsboro;
}
.xuanyan{
color: gray;
padding: 5px;
}
.zhaopian{
}
.zhaopian_img{
width: 100%;
}