<!--模板列表-->
<template>
  <div class="template-list-wrap">
    <div class="list-wrap">
        <div class="template-content" :class="{clicked: item.isclick}" v-for="(item,index) of list" :key="index" @click="check(item,index)">
          <div class="title-wrap">
            <div class="title-icon">神经内科</div>
            <div class="title">国家基本公共卫生服务项目国家基本公共卫生</div>
            <div class="sj" v-if="item.isclick">
              <i class="el-icon-check"></i>
            </div>
          </div>
          <div class="main">
            <div class="main-title">套餐内容包含:</div>
            <ul class="clase-list">
              <li class="clase-item">
                <span class="icon"></span>
                <i class="icon-message">7节课程</i>
              </li>
              <li class="clase-item">
                <span class="icon"></span>
                <i class="icon-message">7节课程</i>
              </li>
              <li class="clase-item">
                <span class="icon"></span>
                <i class="icon-message">7节7节课程课程</i>
              </li>
              <li class="clase-item">
                <span class="icon"></span>
                <i class="icon-message">7节7节课程课程</i>
              </li>
            </ul>
          </div>
          <div class="line"></div>
          <div class="bottom-box">
            <div class="box-left">
              <p class="pice">
                <i class="pice-icon">￥</i>
                <i class="pice-msg">限时免费</i>
                <!-- <i class="pice-time">/30天</i> -->
              </p>
              <p class="old-price">原价:￥3000</p>
            </div>
            <div class="box-right" @click.stop="getDetail(item)">
              查看详情
            </div>
          </div>
        </div>
        <i></i><i></i><i></i><i></i><i></i><i></i>
    </div>
    <el-dialog title="项目详情" :visible.sync="dialogTableVisible" class="dialog-list-wrap">
      <div class="dialog-line"></div>
      <div class="dialog-title">国家基本公共卫生服务项目国家基本公共卫生</div>
      <div class="dialog-message">
        <div class="dm-title">
          <div class="dm-line"></div>
          <div class="dm-msg">基本信息</div>
        </div>
        <div class="dm-main">
          <div class="mian-list">
            <div class="dm-name">内容有效期:</div>
            <div class="dm-nr">30天</div>
          </div>
          <div class="mian-list">
            <div class="dm-name">已参加的机构:</div>
            <div class="dm-nr">已参加的机构已参加的机构</div>
          </div>
        </div>
      </div>
      <div class="dialog-jj">
        <div class="dm-title">
          <div class="dm-line"></div>
          <div class="dm-msg">项目简介</div>
        </div>
        <div class="jjs-main">项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介</div>
      </div>
      <div class="dialog-xq">
        <div class="dm-title">
          <div class="dm-line"></div>
          <div class="dm-msg">项目详情</div>
        </div>
      </div>
    </el-dialog>

    

  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        },
        {
           isclick: false
        }
      ],
      dialogTableVisible: false
    }
  },
  created() {},
  methods: {
    // 选中
    check(item,index) {
      item.isclick = true;
      for (let i = 0; i<this.list.length; i++) {
        if (i != index) {
          this.list[i].isclick = false
        }
      }
    },
    // 获取详情
    getDetail() {
      this.dialogTableVisible = true;
    }
  }
}
</script>

<style lang="scss">
.template-list-wrap {
  .list-wrap {
    padding: 8px 30px 30px 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    > i {
      width:340px;
      margin-left: 22px;
    }
    .template-content {
      margin-top: 22px;
      margin-left: 22px;
      width:340px;
      height:387px;
      border-radius:4px;
      border:2px solid rgba(241,247,246,1);
      cursor: pointer;
      &.clicked {
        position: relative;
        border:2px solid rgba(68,146,132,1);
      }
      .title-wrap {
        width:336px;
        height:106px;
        background:rgba(241,247,246,1);
        border-radius:4px 4px 2px 2px;
        .title-icon {
          width: 72px;
          height: 22px;
          background:rgba(68,146,132,1);
          border-radius:4px 0px 4px 0px;
          font-size: 14px;
          font-family: PingFangSC-Medium,PingFang SC;
          font-weight: 500;
          color:rgba(255,255,255,1);
          line-height: 22px;
          text-align: center;
        }
        .title {
          margin-top: 16px;
          padding: 0 24px;
          font-size:18px;
          font-family: PingFangSC-Medium,PingFang SC;
          font-weight: 500;
          color: rgba(55,56,57,1);
          line-height: 26px;
        }
        .sj {
          position: absolute;
          top: 0;
          right: 0;
          height: 0;
          width: 0;
          border: 30px solid;
          border-color: #449284 #449284 transparent transparent;
          i {
            position: absolute;
            top: -20px;
            right: -20px;
            font-size: 20px;
            color: #fff;
          }
        }
      }
      .main {
        padding: 22px 24px 0;
        height:204px;
        box-sizing: border-box;
        .main-title {
          width:90px;
          height:20px;
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight: 400;
          color:rgba(151,152,153,1);
          line-height:20px;
        }
        .clase-list {
          // text-align: center;
          .clase-item {
            display: flex;
            align-items: center;
            margin-top: 16px;
            .icon {
              width:6px;
              height:6px;
              background:rgba(68,146,132,1);
              margin-right: 12px;
              display: block;
              border-radius: 50%;
            }
            .icon-message {
              height:16px;
              font-size:16px;
              font-family:PingFangSC-Regular,PingFang SC;
              font-weight:400;
              color:rgba(55,56,57,1);
              line-height:20px;
            }
          }
        }
      }
      .line {
        height: 1px;
        margin: 0 12px;
        background:rgba(241,247,246,1);
      }
      .bottom-box{
        height: 78px;
        display: flex;
        align-items: center;
        .box-left {
          flex: 1;
          margin-left: 12px;
          .pice {
            // width:151px;
            // font-size:18px;
            // font-family:PingFangSC-Medium,PingFang SC;
            // line-height:25px;
            .pice-icon {
              margin-right: 2px;
              width:10px;
              height:20px;
              font-size:16px;
              font-family:'PingFangSC-Medium,PingFang SC';
              font-weight:500;
              color:rgba(55,56,57,1);
              line-height:20px;
            }
            .pice-msg {
              width:80px;
              height:20px;
              font-size:20px;
              font-family: 'PingFangSC-Medium,PingFang SC';
              font-weight:500;
              color:rgba(216,43,43,1);
              line-height:20px;
            }
            .pice-time {
              font-size: 14px;
              color: #9B9B9B;
            }
          }
          .old-price {
            margin-top: 7px;
            height:20px;
            font-size:14px;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:rgba(159,159,159,1);
            line-height:20px;
            text-decoration:line-through;
          }
        }
        .box-right {
          margin-right: 24px;
          width:100px;
          height:50px;
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          text-align: right;
          color:rgba(68,146,132,1);
          line-height:50px;

        }
      }
    }
  }
  .dialog-list-wrap {
    .el-dialog {
      width: 800px;
    }
    .dialog-line {
      width:750px;
      height:1px;
      background:rgba(228,231,237,1);
      margin: 0 auto 12px;
    }
    .dialog-title {
      margin: 0 auto;
      width:752px;
      height:80px;
      background:rgba(241,247,246,1);
      border-radius:4px 4px 2px 2px;
      font-size:18px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(55,56,57,1);
      line-height:80px;
      text-align: center;
    }
    .dm-title {
      margin-left: 4px;
      display: flex;
      height: 20px;
      align-items: center;
      .dm-line {
        width:4px;
        height:16px;
        background:rgba(68,146,132,1);
        border-radius:2px;
      }
      .dm-msg {
        width:72px;
        height:20px;
        font-size:18px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:20px;
        margin-left: 12px;
      }
    }
    .dialog-message {
      margin-top: 30px;
      .dm-main {
        .mian-list {
          display: flex;
          margin-top: 14px;
          font-size:14px;
          line-height: 20px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(103,104,105,1);
          line-height:20px;
          .dm-name {
            width: 110px;
            text-align: right;
            margin-right: 4px;
          }
        }
      }
    }
    .dialog-jj {
      margin-top: 40px;
      .jjs-main {
        margin-left: 17px;
        margin-top: 16px;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(103,104,105,1);
        line-height:24px;
      }
    }
    .dialog-xq {
      margin-top: 40px;
      padding-bottom: 30px;
    }
  }
}
</style>