在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ 這種樣式的結(jié)構(gòu)CSS應(yīng)該如何實現(xiàn)?

這種樣式的結(jié)構(gòu)CSS應(yīng)該如何實現(xiàn)?

 <el-row class="ticket-container">
      <el-col :span="3" class="item">
        <div class="empty" @click="handleAdd">
          <i class="el-icon-plus"></i>
          <span>新增優(yōu)惠券</span>
        </div>
      </el-col>
      <el-col :span="3" v-for="item in tableData" class="item" :key="item.id">
        <div @click="handleItemClick(item)">
          <div class="selected" v-if="item.isSelected">√</div>
          <div class="header">{{item.name}}</div>
          <div class="left-circle"></div>
          <div class="middle">
            <div class="price text" v-if="item.groupGoodsVO">{{item.groupGoodsVO.goodsName}}</div>
            <div class="price" v-else>
              <span>¥</span>{{item.price | money}}
            </div>
            <div class="condition">
              {{item.money === -1 ? '無金額門檻' : `滿${(item.money / 100).toFixed(0)}元可用`}}
            </div>
            <div class="date">
              {{getValidDate(item)}}
            </div>
          </div>
          <div class="right-circle"></div>
          <div class="bottom">
            <div>
              <span class="label">限品類:</span>
              <span class="value">{{item.groupRuleGoodsVO ? '限部分商品' : '不限'}}</span>
            </div>
            <!--<div>-->
              <!--<span class="label">限平臺:</span>-->
              <!--<span class="value">{{item.groupRuleScopeVO ? '限部分門店' : '不限'}}</span>-->
            <!--</div>-->
            <!--<div>-->
              <!--<span class="label">券編號:</span>-->
              <!--<span class="value">{{item.codeRule}}</span>-->
            <!--</div>-->
          </div>
        </div>
      </el-col>
 .ticket-dialog {
    .add-btn {
      position: absolute;
      right: 60px;
    }
    .el-pagination {
      padding: 0 60px;
    }
    .ticket-container {
      text-align: center;
      min-height: 100px;
    }
    .el-dialog {
      width: 1030px;
    }
    .el-dialog__body {
      padding: 30px 15px 20px;
    }
    .item {
      cursor: pointer;
      text-align: center;
      width: 200px;
      margin: 15px;
      display: inline-block;
      vertical-align: top;
      position: relative;
      background: #FFFFFF;
      .empty {
        padding: 15px 10px;
        background: #FFFFFF;
        border: 1px dashed #BCBCBC;
        width: 180px;
        height: 127px;
        border-radius: 8px;
        line-height: 129px;
        font-size: 16px;
      }
      .selected {
        width: 35px;
        height: 35px;
        border-radius: 35px;
        background: #3FC960;
        position: absolute;
        z-index: 1;
        top: -6px;
        right: -18px;
        color: #fff;
        font-weight: bold;
        line-height: 35px;
      }
      .header {
        background: #016CDF;
        border-radius: 8px 8px 0 0;
        color: white;
        font-size: 14px;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        padding: 0 12px;
      }
      /*.left-circle {*/
      /*width: 24px;*/
      /*height: 24px;*/
      /*border-radius: 24px;*/
      /*background: white;*/
      /*top: 118px;*/
      /*left: -12px;*/
      /*position: absolute;*/
      /*}*/
      .middle {
        height: 95px;
        padding-top: 10px;
        box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.10);
        .price {
          font-size: 40px;
          color: #016CDF;
          letter-spacing: 0;
          height: 50px;
          line-height: 50px;
          position: relative;
          span {
            font-size: 24px;
            color: #016CDF;
            letter-spacing: 0;
            position: relative;
            top: -12px;
          }
          &.text {
            font-size: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 200px;
          }
        }
        .condition {
          opacity: 0.88;
          font-size: 12px;
          color: #333333;
          letter-spacing: 0;
          line-height: 12px;
        }
        .date {
          opacity: 0.5;
          font-size: 10px;
          color: #333333;
          letter-spacing: 0;
        }
      }
      .bottom {
        background: rgba(195, 195, 195, 0.10);
        box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.10);
        border-radius: 8px;
        border-top: 2px dashed rgba(151, 151, 151, 0.30);
        border-radius: 0 0 8px 8px;
        padding: 8px 0;
        font-size: 10px;
        color: #999999;
        letter-spacing: 0;
        line-height: 14px;
        .label {
          display: inline-block;
          width: 30%;
          text-align: right;
          padding-right: 3px;
        }
        .value {
          width: 60%;
          display: inline-block;
          text-align: left;
          padding-left: 3px;
        }
      }
    }
  }

clipboard.png
這段陰影應(yīng)該怎么加

回答
編輯回答
落殤

css:-moz-box-shadow:3px 4px 10px #8F8F8F; -webkit-box-shadow:3px 4px 10px #8F8F8F; box-shadow:3px 4px 10px #8F8F8F;
發(fā)生事件時添加class到目標元素

2018年5月30日 03:26
編輯回答
選擇

兩個div相連
然后用background 的徑向漸變?nèi)プ鰞?nèi)圓角 比如你的效果圖 就分別兩個div各做2個背景 寫法大概如下
background:radial-gradient(circle at 100% 0, transparent 14px, red 15px) top right;
可以用逗號做出多層background 不寫出來了 自己動手試試

不好意思 沒看清題 原來是加陰影這么簡單的 如樓上所說就可以了

2017年11月30日 23:24