クーポンスタイル

< テンプレート> 
    < divのクラス= "コンテナ" > 
        < divのクラス= "リスト" > 
      < UL > 
        < 李クラス= "クーポン" V-用= "VipInfo.CouponListの項目" ：キー= "item.Id" > 
          < DIV クラス= "クーポン左" > 
            < スパン> {{item.group_dec}} </ スパン> 
          </ DIV > 
          < DIV クラス= "クーポン右"> 
            < スパン>{{item.ticket_no}} </ スパン> 
          </ DIV > 
        </ 李> 
      </ UL > 
    </ DIV > 
    </ DIV > 
</ テンプレート> 

< スクリプト> 
エクスポートデフォルト{ 
  データ（）{ 
    リターン{ 
      VipInfo：{ } 
    } 
  } 
  ）（{搭載
    この.VipInfo = JSON.parse（window.sessionStorage.getItem（' VipInfo ' ））
    はconsole.logを（' 优惠券[0] '、この.VipInfo.CouponList [ 0 ]）
  }、
  メソッド：{ 
  } 
} 
</ スクリプト> 

< スタイルスコープ> 
    .container { 
        幅：100％ 。
        高さ：100VH 。
    背景色：＃99CCFF 。
    } 
  UL { 
    表示：ブロック。
    リストスタイルのタイプ：なし。
    マージン・ブロック・スタート：0 ;
    マージンブロックエンド：0 ; 
    マージンインラインスタート：0 ; 
    マージン・インライン・エンド：0 ; 
    パディングインラインスタート：0 ; 
  } 
  .LIST UL { 
    パディング：.5rem 0 。
  } 
    .LIST UL li.coupon { 
    幅：80vw 。
    高さ：1.6rem 。
    マージン下：.4rem 。
    位置：相対; 
    左：10vw; 
    国境半径：.1rem 。
    オーバーフロー：隠されました; 
  } 
  .coupon左{ 
    位置：絶対。
    幅：30％; 
    高さ：100％; 
    フロート：左; 
    背景色：#FFFFFF ; 
    色：＃1A7DD0 。
  } 
  .coupon左::前{ 
    内容：「」。
    位置：絶対; 
    トップ：0 ; 
    左：0 ; 
    右：0 ; 
    高さ：50％; 
    背景：半径方向の勾配（右上部に円形、＃1 99CCFFの.2rem、透明.2rem、透明.2rem） 。
  } 
  .coupon左::後{ 
    内容：「」。
    位置：絶対; 
    下：0 ; 
    左：0 ; 
    右：0 ;
    高さ：50％; 
    背景：半径方向の勾配（右下のサークル、＃99CCFF .2rem、透明.2rem、透明.2rem）
   } 
  .coupon右{ 
    幅：50％ 。
    右：0 ; 
    幅：70％; 
    高さ：100％; 
    位置：絶対; 
    背景画像：リニアグラジエント（60deg、＃3d3393 0％、＃2b76b9 37％、＃2cacd1 65％、＃3d3393 100％） 。
    色：#FFFFFF ; 
  }
  .coupon右::前{ 
    内容：'' ; 
    位置：絶対; 
    トップ：0 ; 
    左：0 ; 
    右：0 ; 
    高さ：50％; 
    背景：半径方向の勾配（左上に円形、＃99CCFF .2rem、透明.2rem、透明.2rem）
   } 
  .coupon右::後{ 
    内容：'' 。
    位置：絶対; 
    下：0 ; 
    左：0 ; 
    右：0 ; 
    高さ：50％; 
    背景：半径方向の勾配（左下に円、＃99CCFF .2rem、透明.2rem、透明.2rem）
   } 
  .coupon左スパン、.coupon右スパン{ 
    表示：ブロック。
    行の高さ：1.6rem 。
    テキスト整列：センター; 
    フォントサイズ：.4rem 。
    フォント重量：700 。
  } 
</スタイル>