小程序首页示例代码

html

   
   
  
    
  



  
    
    
      公司介绍
    
  
  
    
    
      代理记账
    
  
  
 
    
    
    
      公司转让
    
  

  
    
    
      工商代办
    
  


  
  


  
    
        
          转
        
        
          广西*****进出口有限公司
        
        
    
    
    
      
        
          
            
            
          
            企业行业
          
          
     贸易类

        

      
      
      
        
          
            
            
          
            企业类型
          
          
     有限责任公司
        
      
      
      
        
          
            
            
          
            纳税类型
          
          
     小规模纳税人
        
      
      
      
        
          
            
            
          
            注册资本
          
          
           100-500万
        
      
      
      
        
          
            
            
          
            所在地区
          
          
     青秀区
        
      
    
  

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"
}