<template>
<div class="feature-box">
  <div class="feature ">
      <ul >
          <li @click="dialogVisible = true">
              <span>
                <img :src="new1" alt="">
                <p>轮播图</p>  
              </span>
          </li>
          <li @click="two = true">
            <span>
                <img :src="new1" alt="">
                <p>医院介绍</p>  
              </span>  
          </li>
          <li @click="three = true">
            <span>
                <img :src="new1" alt="">
                <p>科室介绍</p>  
              </span>  
          </li>
          <li @click="four = true">
            <span>
                <img :src="new1" alt="">
                <p>名医介绍</p>  
              </span>  
          </li>
          <li @click="five = true">
            <span>
                <img :src="new1" alt="">
                <p class="title">科室环境</p>  
              </span>  
          </li>
          <li @click="six = true">
            <span>
                <img :src="new1" alt="">
                <p class="title">文章列表</p>  
              </span>  
          </li>
          <li @click="seven = true">
            <span>
                <img :src="new1" alt="">
                <p class="title">活动列表</p>  
              </span>  
          </li>
          <li @click="eight = true">
            <span>
                <img :src="new1" alt="">
                <p class="title">魔方导航</p>  
              </span>  
          </li>
      </ul>
  </div>    
  <div class="clear"></div>

  <!-- 新增轮播图 -->
  <el-dialog
    title="新增轮播图"
    :visible.sync="dialogVisible"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="添加图片: ">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 新增医院介绍 -->
  <el-dialog
    title="新增医院介绍"
    :visible.sync="two"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="医院介绍: ">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="two = false">取 消</el-button>
      <el-button type="primary" @click="two = false">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 新增科室介绍 -->
  <el-dialog
    title="新增科室介绍"
    :visible.sync="three"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="科室介绍: ">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="three = false">取 消</el-button>
      <el-button type="primary" @click="three = false">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 新增名医介绍 -->
  <el-dialog
    title="新增名医介绍"
    :visible.sync="four"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="新增名医: ">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="four = false">取 消</el-button>
      <el-button type="primary" @click="four = false">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 新增科室环境 -->
   <el-dialog
    title="新增科室环境"
    :visible.sync="five"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="新增科室环境: ">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="five = false">取 消</el-button>
      <el-button type="primary" @click="five = false">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 新增文章列表 -->
  <el-dialog
    title="新增文章列表"
    :visible.sync="six"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="文章分类: ">
        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:left;">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:right;">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="首页展示条数: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="six = false">取 消</el-button>
      <el-button type="primary" @click="six = false">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 新增活动列表 -->
   <el-dialog
    title="新增活动列表"
    :visible.sync="seven"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
     
      <el-form-item label="首页展示条数: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="seven = false">取 消</el-button>
      <el-button type="primary" @click="seven = false">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 新增魔方导航 -->
  <el-dialog
    title="新增魔方导航"
    :visible.sync="eight"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="新增科室环境: ">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="eight = false">取 消</el-button>
      <el-button type="primary" @click="eight = false">确 定</el-button>
    </span>
  </el-dialog>


</div>
</template>

<script>
export default {
  name: "newfeature",
  data() {
    return {
      new1: require("../../../assets/preview/new-1.png"),
      dialogVisible: false,
      two: false,
      three: false,
      four: false,
      five: false,
      six: false,
      seven: false,
      eight: false,
      form: {
        name: ""
      }
    };
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.clearfix {
  clear: both;
}

.el-upload--picture-card {
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
}
.tips {
  font-size: 12px;
  line-height: 18px;
}
</style>
