wxml代码

<view>
    <!--广告图片 mode="widthFix" 设定高度随宽度自动变化-->
    <image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>
<view class="bg">
<view class="chaxun">
    <view class="dizhi">
        <input class="dizhi_kaishi" placeholder="杭州" bindtap="kaishi"></input>
        <image class="dizhi_tubiao" src="/img/right.png" mode="widthFix"></image>
        <input class="dizhi_jieshu" bindtap="kaishi"></input>
    </view>
    <view class="shijian">
        <view class="shijian1">07月14日</view>
        <view class="shijian2">明天出发</view>
        <image class="shijian3" src="/img/arrow.png" mode="widthFix"></image>
    </view>
    <view class="sousuo">
        <button class="sousuo_btn" bindtap="chaxun">开始搜索</button>
    </view>
</view>
</view>
<view class="shuoming">
    <view class="shuoming_biaoti"> 火车票订票小程序使用说明</view>
    <view class="shuoming_xiangmu">1：注册账号或者使用微信登录</view>
    <view class="shuoming_xiangmu">2：查询车次，选择乘客，选择座位</view>
    <view class="shuoming_xiangmu">3：付款，订购完毕</view>
</view>
<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">最新资讯</view>
    <navigator class="qukuai_you" url="/pages/xinxi/list?cs_lxid=241&mc=资讯中心">所有>></navigator>
</view>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>07-14 暑假火车票丁欧通知</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 用户微信直接登录功能开通</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 关于违规会员处理的通知</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>

wxss代码

/* 广告图片*/
.ad01{ 
    width: 100%; /* 宽度100%*/
}
.bg{
    padding: 10px;
    background-color: #f9f9f9;
}
.chaxun{border-radius: 10px;background-color: white;padding:10px}
.dizhi{display: flex;}
.dizhi_kaishi{border-bottom: 1px solid rgb(243, 243, 243);flex-grow: 1; padding: 5px;}
.dizhi_tubiao{width: 25px;padding: 5px;}
.dizhi_jieshu{border-bottom: 1px solid rgb(243, 243, 243);flex-grow: 1; padding: 5px;}
.shijian{display: flex; align-items: center; padding-top: 10px;  padding-bottom: 10px; border-bottom: 1px solid rgb(243, 243, 243);}
.shijian1{font-weight: bold;color: gray;}
.shijian2{font-size: 15px; color: gray; padding-left: 10px;flex-grow: 1; align-self: flex-end;}
.shijian3{width: 10px;}
.sousuo{padding: 5px;}
.sousuo_btn{border-radius: 20px; background-color: orange; color: white;}
.shuoming{
    padding: 5px;
    color: gray;
    font-size: 15px;
}
.shuoming_biaoti{
   background-color: #f9f9f9;
    font-weight: bold;
    color: orangered;
    border-bottom: 1px solid gainsboro;
    padding: 5px 0px;
}
.shuoming_xiangmu{
    padding: 5px 0px;
    border-bottom: 1px dotted  gainsboro;
}
.qukuai{display: flex;align-items:center;background-color: #f2f2f2;}
.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;}
.qukuai_you{font-size: 14px; color: gray;padding-right: 10px;}
.xinxi {
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
    color: gray;
  }
  .xinxi-icon {
    width: 19px;
    height: 19px;
  }
  
  .xinxi-text {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .xinxi-arrow {
    width: 13px;
    height: 13px;
  }