在線電子書閱讀微信小程序 畢業設計（2）分類

wxml代碼

<!--pages/shu/index.wxml-->
<view class="chaxun">
    <input  class="chaxun_zuo" type="text" name="cx_neirong" value="{{cx_neirong}}" placeholder="請輸入圖書名稱"></input>
    <button  class="chaxun_you" type="mini" form-type="submit" >查詢</button>
</view>

<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">前端基礎課</view>
    <navigator class="qukuai_you" url="/pages/shipin/index2" >所有課程>></navigator>
</view>
<view class="fenlei">
    <navigator class="fenlei_list" url="/pages/shipin/index2" >HTMl</navigator>
    <navigator class="fenlei_list" url="/pages/shipin/index2" >CSS</navigator>
    <navigator class="fenlei_list" url="/pages/shipin/index2" >Javascript</navigator>
    <navigator class="fenlei_list" url="/pages/shipin/index2" >其他</navigator>
</view>

<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">JS系列課</view>
    <view class="qukuai_you">所有課程>></view>
</view>
<view class="fenlei">
    <view class="fenlei_list">Vue.js</view>
    <view class="fenlei_list">Uni-app</view>
    <view class="fenlei_list">Javascript</view>
    <view class="fenlei_list">其他</view>
</view>

<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">微信小程序</view>
    <view class="qukuai_you">所有課程>></view>
</view>
<view class="fenlei">
    <view class="fenlei_list">微信小程序</view>
    <view class="fenlei_list">其他</view>
</view>

<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">WEB服務器端</view>
    <view class="qukuai_you">所有課程>></view>
</view>
<view class="fenlei">
    <view class="fenlei_list">ASP</view>
    <view class="fenlei_list">PHP</view>
    <view class="fenlei_list">JAVA</view>
    <view class="fenlei_list">Go語言</view>
    <view class="fenlei_list">Python</view>
    <view class="fenlei_list">其他</view>
</view>

<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">數據庫</view>
    <view class="qukuai_you">所有課程>></view>
</view>
<view class="fenlei">
    <view class="fenlei_list">Mysql</view>
    <view class="fenlei_list">Sql Server</view>
    <view class="fenlei_list">其他</view>
</view>

<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">移動開發</view>
    <view class="qukuai_you">所有課程>></view>
</view>
<view class="fenlei">
    <view class="fenlei_list">H5</view>
    <view class="fenlei_list">跨平臺開發</view>
    <view class="fenlei_list">微信開發</view>
    <view class="fenlei_list">其他</view>
</view>

wxss代碼

/* pages/shu/index.wxss */
.chaxun{
    background-color:#f2f2f2;
    display: flex;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    align-items: center;
}
.chaxun_zuo{
    padding-left: 15px;
    flex-grow: 1;
}
.chaxun_you{
    border-radius: 0px;
    background-color: orange;
    color: white;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


.qukuai{display: flex;align-items:center;background-color: #f9f9f9;}
.qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;}
.qukuai_zhong{font-size: 16px; flex-grow: 1;color: rgb(13, 163, 233);}
.qukuai_you{font-size: 16px; color: gray;padding-right: 10px;}

.fenlei{
    display: flex; 
    flex-wrap: wrap;
    font-size: 14px;
}
.fenlei_list{
    width: 25%;
    padding: 10px 0px 10px 10px;
    box-sizing: border-box;
    font-size: 16px;
}