評選投票微信小程序 畢業設計 課程設計（6）投票詳情頁面

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%;
}