zoukankan      html  css  js  c++  java
  • 小程序定义优惠券样式

    //wxml
        <view class="lists">
                <van-radio-group value="{{ radio }}" bind:change="onChange">
                    <view class="list" id='wrapper' wx:for="{{cartItems}}" wx:key="key" wx:for-index="key">
                        <view class="left" data-key="{{key}}" style="background-color:{{randomColorArr[key]}}; ">{{item.value}}</view>
                        <view class="right" data-index="{{key}}" bindtap="rightit">
                            <view class="right_left ">
                                <view>{{item.title}}</view>
                                <view>{{item.titleThree}}</view>
                                <view>{{item.titleTwo}}</view>
                            </view>
                            <van-radio name="{{item.name}}"></van-radio>
                        </view>
                    </view>
                </van-radio-group>
            </view>
    //wxss
    .lists{
       100vw;
      height: 78vh;
      overflow: scroll;
    }
    .list{
      display: flex;
       90%;
      margin: 3vh auto;
    }
    .left{
       250rpx;
      height: 170rpx;
      background-color:  rgb(51, 138, 238); /* 不支持线性的时候显示 */
      background-image: linear-gradient(to right, #6495ed, rgb(85, 198, 226));
      text-align: center;
      line-height: 170rpx;
      color: white;
      font-size: 22px;
      border-radius:10px 30px 30px 10px;
      background: #58a;
      background: radial-gradient(circle at top right, white 5px,transparent 0) top right, radial-gradient(circle at bottom right, white 5px, transparent 0) bottom right;/*优惠券样式*/
      background-size: 100% 60%;
      background-repeat: no-repeat;
      border-radius: 5px 0 0 5px;
      border-right: 1rpx dashed #ccc;
    }
    .right{
       425rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border: solid 2px #F5F5F5;
      border-radius: 30px 10px 10px 30px;
      background: #58a;
      background: radial-gradient(circle at top left, transparent 5px, white 0) top left,radial-gradient(circle at bottom left, transparent 5px, white 0) bottom left;
      background-size: 100% 60%;
      background-repeat: no-repeat;
      border-radius: 0 5px 5px 0; 
    }
    .right_left :nth-child(1){
      margin-bottom: 10rpx;
    }
    .right_left :nth-child(2){
      margin-bottom: 10rpx;
      color: rgb(151, 148, 148);
    }
    //js
    Page({
      data: {
        cartItems: [{
          title: "抵扣1",
          titleTwo: "18小时",
          titleThree:'免费充值',
          value: "8小时",
          name:'1'
        },
        {
          title: "抵扣2",
          titleTwo: "剩余数量",
          titleThree:'免费充值',
          value: "20",
          name:'2'
        },
        {
          title: "抵扣2",
          titleTwo: "4小时",
          titleThree:'免费充值',
          value: "8折",
          name:'3'
        },{
          title: "抵扣3",
          titleTwo: "28小时",
          titleThree:'免费充值',
          value: "8小时",
          name:'4'
        },
        {
          title: "抵扣4",
          titleTwo: " 8小时",
          titleThree:'免费充值',
          value: "20元",
          name:'5'
        },
        {
          title: "抵扣5",
          titleTwo: "1小时",
          titleThree:'免费充值',
          value: "1小时",
          name:'6'
        },
        {
          title: "抵扣6",
          titleTwo: "8小时",
          titleThree:'免费充值',
          value: "20元",
          name:'7'
        },
      ],
     // 自定义自己喜欢的颜色
         colorArr: [ "rgb(85, 198, 226)",'#6495ed','rgb(51, 138, 238)' ],
       // 存储随机颜色
       randomColorArr: [],
    },
     onLoad: function (options) {
        let that = this,
        labLen = that.data.cartItems.length,
        colorArr = that.data.colorArr,
        colorLen = colorArr.length,
        randomColorArr = [];
        //判断执行
        do{
          let random = colorArr[Math.floor(Math.random() * colorLen)];
          randomColorArr.push(random);
          labLen--;
        } while (labLen > 0)
    
        that.setData({ 
          randomColorArr: randomColorArr
        });
      },
    })
    //json vantweapp
     "usingComponents": {
        "van-radio": "/dist/radio/index",
        "van-radio-group": "/dist/radio-group/index",
        "van-overlay": "/dist/overlay/index"
      }
  • 相关阅读:
    ios UIWebView截获html并修改便签内容(转载)
    IOS获取系统时间 NSDate
    ios 把毫秒值转换成日期 NSDate
    iOS  如何判断当前网络连接状态  网络是否正常  网络是否可用
    IOS开发 xcode报错之has been modified since the precompiled header was built
    iOS系统下 的手机屏幕尺寸 分辨率 及系统版本 总结
    iOS 切图使用 分辨率 使用 相关总结
    整合最优雅SSM框架:SpringMVC + Spring + MyBatis 基础
    Java面试之PO,VO,TO,QO,BO
    Notes模板说明
  • 原文地址:https://www.cnblogs.com/minghan/p/13330871.html
Copyright © 2011-2022 走看看