第四次作业

最新推荐文章于 2024-04-24 12:43:01 发布

候卿1226

最新推荐文章于 2024-04-24 12:43:01 发布

阅读量82

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/L5081226/article/details/137190972

版权

 
<view class="container">
  <canvas canvas-id="olympic-rings" style="width: 215px; height: 200px;"></canvas>
</view>


Page({
  onReady() {
    const ctx = wx.createCanvasContext('olympic-rings');
 

    ctx.beginPath();
    ctx.arc(60, 60, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle('#0072bb');
    ctx.stroke();
 

    ctx.beginPath();
    ctx.arc(110, 60, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle('#f4d942');
    ctx.stroke();
 
    ctx.beginPath();
    ctx.arc(160, 60, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle('#000000');
    ctx.stroke();
 

    ctx.beginPath();
    ctx.arc(85, 100, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle('#009e52');
    ctx.stroke();
 

    ctx.beginPath();
    ctx.arc(135, 100, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle('#ff6319');
    ctx.stroke();
 
    ctx.draw();
  }
})

<view class="head">✕ 西安找拼车</view>
<view class="one">
  <view class="txw">联系方式（手机和微信至少填一项）</view>
</view>
 
<view class="two">
  <view class="two2">称呼*</view>
  <view class="two3">请输入称呼</view>
</view>
 
<view class="three">
  <view class="three2">手机号</view>
  <view class="three3">请输入手机号</view>
</view>
 
<view class="four">
  <view class="four2">微信号</view>
  <view class="four3">请输入微信号</view>
</view>
 
<view class="one">
  <view class="txw">拼车信息</view>
</view>
 
<view class="five">
  <view class="five2">出发地点*</view>
  <view class="five3">限7个字</view>
</view>
 
<view class="six">
  <view class="six2">目的地*</view>
  <view class="six3">限7个字</view>
</view>
 
<view class="seven">
  <view class="seven2">空座数*</view>
  <view class="seven3">请输入空座数</view>
</view>




.head{
  margin-top: 100rpx;
  font-size: 70rpx;
  color: aliceblue;
  background-color: black;
}
 
 
.one{
  padding: 45rpx 0 0 40rpx;
  border-bottom: 4px solid #c0c0c0; 
  background-color: #ccc;
}
 
.txw{
  width: auto;
  height: 100rpx;
  font-size: 35rpx;
}
 
.two{
  margin-left: 30px;
  padding: 20px 0 20px 0;
  border-bottom: 4px solid #c0c0c0;
}
 
.two2{
  font-size: 55rpx;
  font-weight: 700;
}
 
.two3{
  position: absolute;
  left: 180px;
  top: 217px;
  font-size: 55rpx;
}
 
.three{
  margin-left: 30px;
  padding: 20px 0 20px 0;
  border-bottom: 4px solid #c0c0c0;
}
 
.three2{
  font-size: 55rpx;
  font-weight: 700;
}
 
.three3{
  position: absolute;
  left: 180px;
  top: 300px;
  font-size: 55rpx;
}
 
.four{
  padding: 20px 0 20px 30px;
  border-bottom: 4px solid #c0c0c0;
}
 
.four2{
  font-size: 55rpx;
  font-weight: 700;
}
 
.four3{
  position: absolute;
  left: 180px;
  top: 385px;
  font-size: 55rpx;
}
 
 
.five{
  margin-left: 30px;
  padding: 20px 0 20px 0px;
  border-bottom: 4px solid #c0c0c0;
}
 
.five2{
  font-size: 55rpx;
  font-weight: 700;
}
 
.five3{
  position: absolute;
  left: 180px;
  top: 555px;
  font-size: 55rpx;
}
 
.six{
  margin-left: 30px;
  padding: 20px 0 20px 0px;
  border-bottom: 4px solid #c0c0c0;
}
 
.six2{
  font-size: 55rpx;
  font-weight: 700;
}
 
.six3{
  position: absolute;
  left: 180px;
  top: 640px;
  font-size: 55rpx;
}
 
.seven{
  padding: 20px 0 20px 30px;
  border-bottom: 4px solid #c0c0c0;
}
 
.seven2{
  font-size: 55rpx;
  font-weight: 700;
}
 
.seven3{
  position: absolute;
  left: 180px;
  top: 725px;
  font-size: 55rpx;
}