微信小程序之“自取”与“外卖”

最新推荐文章于 2024-09-10 13:35:02 发布

zhulovege

最新推荐文章于 2024-09-10 13:35:02 发布

阅读量830

点赞数 2

文章标签：微信小程序 elementui webview

本文链接：https://blog.csdn.net/m0_69639625/article/details/124808212

版权

效果演示：

Index.html代码：

<view class="section">
  <view class="section_content">
    <view class="left_ziqu" bindtap="goZiqu">
      <image src="/pages/image/11.png"></image>
      <text>自取</text>
    </view>
    <view class="right_waimai" bindtap="goOrder">
    <image src="/pages/image/22.png"></image>
    <text>外卖</text>
    </view>
  </view>
</view>

(由于自取与外卖页面没有编写所以点击后只显示原始页面内容）

在index.wxss的代码：

.section{
   display:flex;
   justify-content:center;
   padding:20rpx 0;
}
.section .section_content{
  display:flex;
  justify-content:space-between;
  width:690rpx;
  height:224rpx;
  background-color:#3e87991a;
}
.section .section_content .left_ziqu,
.section .section_content .right_waimai{
  width:50%;
  display:flex;
  justify-content: center;
  align-items:center;
  flex-direction:column;
  position:relative;
}
.section .section_content image{
  width:84rpx;
  height:84rpx;
  margin:20rpx 0;
}
.section .section_content text{
  font-size:30rpx;
  color:#5a5b5c;
  font-weight:bold;
}
.section .section_content .left_ziqu::after{
  content:"";
  display:block;
  width:1rpx;
  height:150rpx;
  background-color:red;
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}