評選投片微信小程序 畢業設計 課程設計（1）首頁

wxml代碼

<view>
    <image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>

<view class="shuju">
    <view class="shuju_xiangmu">
        <view class="shuju_xiangmu_shang">196</view>
        <view class="shuju_xiangmu_xia">報名數</view>
    </view>
    <view class="shuju_xiangmu">
        <view class="shuju_xiangmu_shang">53698</view>
        <view class="shuju_xiangmu_xia">總票數</view>
    </view>
    <view class="shuju_xiangmu no_border_right">
        <view class="shuju_xiangmu_shang">1987585</view>
        <view class="shuju_xiangmu_xia">訪問量</view>
    </view>
</view>

<view class="chaxun">
    <input  class="chaxun_zuo" type="text" placeholder="請輸入編號或者姓名查詢"></input>
    <image  class="chaxun_you" src="/img/cx02.png" mode="widthFix"></image>
</view>

<view class="liebiao">
    <view class="liebiao_xiangmu">
        <navigator url="/pages/toupiao/xiangqing" class="liebiao_xiangmu1">
            <image src="/tupian/01.jpg"  class="liebiao_xiangmu1_tupian"  mode="widthFix"></image>
        </navigator>  
        <view class="liebiao_xiangmu2">
            <view class="liebiao_xiangmu2_zuo">001號</view>
            <view class="liebiao_xiangmu2_you">趙天明</view>
        </view>
        <view class="liebiao_xiangmu3">
            <view class="liebiao_xiangmu3_zuo">3678票</view>
            <view class="liebiao_xiangmu3_you">投一票</view>
        </view>
    </view>
    <view class="liebiao_xiangmu">
       <navigator url="/pages/toupiao/xiangqing" class="liebiao_xiangmu1">
            <image src="/tupian/02.jpg"  class="liebiao_xiangmu1_tupian"  mode="widthFix"></image>
        </navigator> 
        <view class="liebiao_xiangmu2">
            <view class="liebiao_xiangmu2_zuo">001號</view>
            <view class="liebiao_xiangmu2_you">趙天明</view>
        </view>
        <view class="liebiao_xiangmu3">
            <view class="liebiao_xiangmu3_zuo">3678票</view>
            <view class="liebiao_xiangmu3_you">投一票</view>
        </view>
    </view>
    <view class="liebiao_xiangmu">
       <navigator url="/pages/toupiao/xiangqing" class="liebiao_xiangmu1">
            <image src="/tupian/03.jpg"  class="liebiao_xiangmu1_tupian"  mode="widthFix"></image>
        </navigator> 
        <view class="liebiao_xiangmu2">
            <view class="liebiao_xiangmu2_zuo">001號</view>
            <view class="liebiao_xiangmu2_you">趙天明</view>
        </view>
        <view class="liebiao_xiangmu3">
            <view class="liebiao_xiangmu3_zuo">3678票</view>
            <view class="liebiao_xiangmu3_you">投一票</view>
        </view>
    </view>
    <view class="liebiao_xiangmu">
       <navigator url="/pages/toupiao/xiangqing" class="liebiao_xiangmu1">
            <image src="/tupian/04.jpg"  class="liebiao_xiangmu1_tupian"  mode="widthFix"></image>
        </navigator> 
        <view class="liebiao_xiangmu2">
            <view class="liebiao_xiangmu2_zuo">001號</view>
            <view class="liebiao_xiangmu2_you">趙天明</view>
        </view>
        <view class="liebiao_xiangmu3">
            <view class="liebiao_xiangmu3_zuo">3678票</view>
            <view class="liebiao_xiangmu3_you">投一票</view>
        </view>
    </view>            
</view>

wxss代碼

/* pages/index/index.wxss */
.ad01{
    width: 100%;
}

.shuju{
    display: flex;
}
.shuju_xiangmu{
    flex-grow: 1;
    justify-content: center;
    border-right:1px solid gainsboro;
}
.no_border_right{
    border:0;
}
.shuju_xiangmu_shang{
    text-align: center;
    color: gray;
    font-size: 12px;
    padding: 5px;
}
.shuju_xiangmu_xia{
    text-align: center;
    color: orange;
    font-weight: bold;
    font-size: 14px;
}

.chaxun{
    background-color:#f2f2f2;
    display: flex;
    margin: 10px;
    padding: 5px;
}
.chaxun_zuo{
    flex-grow: 1;
}
.chaxun_you{
    width: 25px;
}

.liebiao{
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
}
.liebiao_xiangmu{
    width: 48%;
    margin: 3px;
    padding: 5px;
    box-sizing: border-box;
    border:1px solid #f3f3f3;
    box-shadow: 2px 2px 3px gainsboro;
}
.liebiao_xiangmu1{
}
.liebiao_xiangmu1_tupian{
    width: 100%;
}
.liebiao_xiangmu2{
    display: flex;
    color: gray;
}
.liebiao_xiangmu2_zuo{
    flex-grow: 1;
}
.liebiao_xiangmu2_you{

}
.liebiao_xiangmu3{
    display: flex;
}
.liebiao_xiangmu3_zuo{
    flex-grow: 1;
    color: orangered;
}
.liebiao_xiangmu3_you{
    background-color: orangered;
    color: white;
    flex-grow: 1;
    text-align: center;
}