小程序首页示例代码

html

<!--index.wxml-->
<view class="container">
  <view class="curved"> 
   <swiper class="swiperImageContainer square-dot margin-top-s" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" easing-function="easeInOutCubic">
  <swiper-item wx:for="{{swiperList}}" wx:for-item="item"  wx:key="id">
    <image class="swiperItemImg" src="{{item.url}}" ></image>
  </swiper-item>
</swiper>
<!-- 公司介绍、代理记账、公司转让 -->
<view class="middle">
  <view class="jiesao">
    <image style=" background-color: #f9ce65;" class="middle-img" src="/pages/image/gongshi.png"></image>
    <view class="middle-text">
      公司介绍
    </view>
  </view>
  <view class="jiesao">
    <image style=" background-color: #f7a056;" class="middle-img" src="/pages/image/jizang.png"></image>
    <view class="middle-text">
      代理记账
    </view>
  </view>
  
 
    <view class="jiesao" bindtap="tolink">
    <image style=" background-color:#8ac293; width: 45rpx;height: 45rpx;padding: 15rpx;"  class="middle-img" src="/pages/image/zuanrang.png"></image>
    <view class="middle-text">
      公司转让
    </view>
  </view>

  <view class="jiesao">
    <image style="background-color:#749def;width: 45rpx;height: 45rpx;padding: 15rpx;" class="middle-img" src="/pages/image/gongsang.png"></image>
    <view class="middle-text">
      工商代办
    </view>
  </view>
</view>
<van-cell-group  inset>
  <van-cell title="南宁市西乡塘区新阳路223号A单元2303" icon="location-o" is-link  bindtap="tomap"/>
  <van-cell icon="phone-o" title="电话：" value="17776019009" is-link  bindtap="freeTell"></van-cell>
</van-cell-group>
<view class="zuanrang" wx:for="{{10}}">
  <view class="zuanrang-demo" >
    <view class="zuanrang-top">
        <view class="toptext1">
          转
        </view>
        <view class="toptext2">
          广西*****进出口有限公司
        </view>
        <image src="/pages/image/hot.png" mode=""/>
    </view>
    <view class="zuanrang-bottom">
    <!--  企业行业 -->
      <view class="bottom-item">
        <view class="item-o" >
          <view class="bottom-item-top">
            <view class="sanjiao">
            </view>
          <view>
            企业行业
          </view>
          </view>
     <view class="item-o-text">贸易类</view>

        </view>

      </view>
      <!-- 企业类型 -->
      <view class="bottom-item">
        <view class="item-o" >
          <view class="bottom-item-top">
            <view class="sanjiao">
            </view>
          <view>
            企业类型
          </view>
          </view>
     <view class="item-o-text">有限责任公司</view>
        </view>
      </view>
      <!-- 纳税类型 -->
      <view class="bottom-item">
        <view class="item-o" >
          <view class="bottom-item-top">
            <view class="sanjiao">
            </view>
          <view>
            纳税类型
          </view>
          </view>
     <view class="item-o-text">小规模纳税人</view>
        </view>
      </view>
      <!-- 注册资本 -->
      <view class="bottom-item">
        <view class="item-o" >
          <view class="bottom-item-top">
            <view class="sanjiao">
            </view>
          <view>
            注册资本
          </view>
          </view>
     <view class="item-o-text">      100-500万</view>
        </view>
      </view>
      <!-- 所在地区 -->
      <view class="bottom-item">
        <view class="item-o" >
          <view class="bottom-item-top">
            <view class="sanjiao">
            </view>
          <view>
            所在地区
          </view>
          </view>
     <view class="item-o-text">青秀区</view>
        </view>
      </view>
    </view>
  </view>
</view>

</view>
<view>
</view>

</view>

js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    swiperList: [
      {
      id: 0,
      url: 'https://imgs.yxhhr.com/Public/Uploads/2022-01-14/61e0f0930f9a0.jpg'
    }, {
      id: 1,
      url: 'https://imgs.yxhhr.com/Public/Uploads/2022-01-14/61e0f0930f9a0.jpg',
    }, 
    {
      id: 2,
      url: 'https://imgs.yxhhr.com/Public/Uploads/2022-01-14/61e0f0930f9a0.jpg'
    }],
 
  },
 
 
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  tolink(){
    wx.navigateTo({
      "url": "/pages/index/link/link"
    })
  },
  tomap(){
    wx.openLocation({
      latitude: 23.099994,
      longitude: 113.324520,
      scale: 18
    })
  },
  freeTell() {
    wx.makePhoneCall({
      phoneNumber: '17776019009', //仅为示例，并非真实的电话号码
      success: function() {
        console.log("拨打电话成功！")
      },
      fail: function() {
        console.log("拨打电话失败！")
      }
    })
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

css

page {
  background-color: #f8f8f8;
}
.curved {
  position: relative;
  background: #f46634;
  height: 18vh;
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}
.swiperImageContainer {
  width: 100%;
  height: 300rpx;
}
.swiperItemImg {
  position: absolute;
  width: 92%;
  height: 300rpx;
  border-radius: 20rpx;
  margin: 0 4%;
}

swiper.square-dot .wx-swiper-dot {
    background-color: var(--white);
    opacity: 0.4;
    width: 10rpx;
    height: 10rpx;
    border-radius: 20rpx;
    margin: 0 8rpx !important;
}

swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
    opacity: 1;
    width: 30rpx;
}
.middle{
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.middle-img{
  padding: 6rpx;
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.middle-text{
  margin-top: 15rpx;
  font-size: 24rpx;
}

.jiesao{
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
.zuanrang{
  margin-top: 20rpx;
  background-color: white;
  margin-bottom: 25rpx;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  border-radius: 20rpx;
  margin-right: 20rpx;
  margin-left: 20rpx;
}
.zuanrang-demo{
  margin: 0 15rpx;

}
.zuanrang-top{
  display: flex;
  align-items: center;
  padding: 10rpx 0;
  margin-bottom: 5rpx;
  border-bottom: 1rpx solid #969696;
}
.zuanrang-top .toptext1{
  font-weight: bold;
  color: #f26533;
  margin:0 10rpx;
}
.zuanrang-top image{
  margin-left: 30rpx;
  width: 34rpx;
  height: 34rpx;
}
.zuanrang-bottom{
  display: flex;
  justify-content: space-between;
}
.item-o{
  display: flex;
  flex-direction: column;
}
.item-o-text{
  font-size: 23rpx;
  margin-bottom: 10rpx;
}
.bottom-item-top{
  display: flex;
  justify-content: space-between;
  font-size: 25rpx;
  align-items: center;
  color: #969696;
  margin-bottom: 5rpx;
}
.sanjiao{
  width: 0;
  height: 0;
  border-left: 10rpx solid #969696;
  border-top: 10rpx solid transparent;
  border-bottom: 10rpx solid transparent;
  margin-right:6rpx;
}

json

{
  "navigationBarTitleText": "狄牛网",
  "navigationBarBackgroundColor": "#f46634",
  "navigationBarTextStyle": "white"
}