labsop_website/src/views/Home.vue

<template>
  <div class="home">
    <swiper id="swiperBox"
            v-bind:options="swiperOption"
            ref="mySwiper">
      <swiper-slide class="swiper-slide slide-one"></swiper-slide>
      <swiper-slide class="swiper-slide slide-two"></swiper-slide>
      <swiper-slide class="swiper-slide slide-three"></swiper-slide>
    </swiper>
    <div class="common-container">
      <el-container>
        <!-- <header>
          <ul>
            <li>
              <img src=""
                   alt="">
              <div>
                <p>1280</p>
                <span>仪器总数</span>
              </div>
            </li>
             <li>
              <img src=""
                   alt="">
              <div>
                <p>1280</p>
                <span>仪器总数</span>
              </div>
            </li>
             <li>
              <img src=""
                   alt="">
              <div>
                <p>1280</p>
                <span>仪器总数</span>
              </div>
            </li>
          </ul>
        </header> -->
        <el-row :gutter="12"
                class="mt12">
          <el-col :span="8">
            <el-card>
              <div slot="header"
                   class="header">
                <h4>通知公告</h4>
              </div>
              <div class="link-list">
                <ul>
                  <li v-for="item in noticeList"
                      :key="item.id">
                    <div>
                      {{ item.noticeTitle }}
                    </div>
                    <span>{{ item.noticeTime.split(' ')[0] }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div slot="header"
                   class="header">
                <h4>新闻动态</h4>
              </div>
              <div class="link-list">
                <ul>
                  <li v-for="item in noticeList"
                      :key="item.id">
                    <div>
                      {{ item.noticeTitle }}
                    </div>
                    <span>{{ item.noticeTime.split(' ')[0] }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div slot="header"
                   class="header">
                <h4>技术服务</h4>
              </div>
              <div class="link-list">
                <ul>
                  <li v-for="item in noticeList"
                      :key="item.id">
                    <div>
                      {{ item.noticeTitle }}
                    </div>
                    <span>{{ item.noticeTime.split(' ')[0] }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-container>
      <div class="equip">
        <el-container>
          <h2>主要设备</h2>
          <p>中心集中了学校大型贵重仪器设备，实现实验设施、仪器设备、实验方法和实验技术的优势互补、资源共享。拥有各类仪器设备240余台件，价值省内同类科研领域领先水平。</p>
          <ul>
            <li>
              <img src="../assets/img/equip-1.jpg" />
              <span>超敏多因子电化学发光分析仪</span>
            </li>
            <li>
              <img src="../assets/img/equip-2.jpg" />
              <span>多功能酶标仪</span>
            </li>
            <li>
              <img src="../assets/img/equip-3.png" />
              <span>微流控毛细管电泳系统</span>
            </li>
            <li>
              <img src="../assets/img/equip-4.jpg" />
              <span>全自动核酸提取纯化仪</span>
            </li>
          </ul>
        </el-container>
      </div>
      <el-container class="mb12">
        <el-row :gutter="12">
          <el-col :span="9">
            <el-card>
              <div slot="header"
                   class="header">
                <h4>规章制度</h4>
              </div>
              <div class="link-list">
                <ul>
                  <li v-for="item in institutionList"
                      :key="item.id">
                    <div>
                      {{ item.title }}
                    </div>
                    <span>{{ item.time }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </el-col>
          <el-col :span="9">
            <el-card>
              <div slot="header"
                   class="header">
                <h4>下载专区</h4>
              </div>
              <div class="link-list">
                <ul>
                  <li v-for="item in downloadList"
                      :key="item.id">
                    <div>
                      {{ item.title }}
                    </div>
                    <span>{{ item.time }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <ul class="btn-list">
              <li>大型仪器共享平台</li>
              <li>安全准入考试系统</li>
              <li>图书馆</li>
              <li>教务管理</li>
            </ul>
          </el-col>
        </el-row>
      </el-container>
    </div>
  </div>
</template>
 
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getNoticeList } from "@/api/login";
import to from "await-to-js";
export default {
  name: "HelloWorld",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      loading: true,
      caseList: [],
      newsList: [],
      swiperOption: {
        notNextTick: true, //notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: "horizontal", //水平方向移动
        grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoHeight: false, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 1, //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        mousewheel: true, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
        mousewheelControl: true, //同上
        height: 450, // 高度设置，占满设备高度
        resistanceRatio: 0, //抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
        observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新

        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        //debugger: true,

        // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
        on: {
          //监听滑动切换事件，返回swiper对象
          // slideChange: () => {
          //   let swiper = this.$refs.mySwiper.swiper;
          //   //console.log(swiper.activeIndex); //滑动打印当前索引
          //   if (swiper.activeIndex === this.list.length - 1) {
          //     //到最后一个加载更多数据
          //     let newList = [];
          //     let listLength = this.list.length;
          //     for (let i = 0; i < 10; i++) {
          //       newList.push(listLength + i);
          //     }
          //     this.list = this.list.concat(newList);
          //   }
          // }
        },
      },
      noticeList: [],
      institutionList: [],
      downloadList: []
    };
  },
  created() {},
  // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  mounted() {
    this.getNotice();
    this.getInstitutionList()
    this.getDownloadList()
  },
  methods: {
    async getNotice() {
      const [err, res] = await to(getNoticeList());
      if (err) return;
      this.noticeList = res.data.list || [];
    },
    getInstitutionList() {
      this.institutionList = [
        {
          title: "科研实验室管理工作例会制度",
          time: "2024-06-03",
        },
        {
          title: "《关于建立校级教学平台与校级教学平台建设方案》",
          time: "2024-05-01",
        },
        {
          title: "《关于建立校级教学平台与校级教学平台建设方案》",
          time: "2024-05-01",
        }
      ]
    },
    getDownloadList() {
      this.downloadList = [
        {
          title: "入室登记表-学生版",
          time: "2024-11-15",
        },
        {
          title: "实验管理中心细胞室使用申请表",
          time: "2024-06-03",
        },
        {
          title: "实验管理中心仪器设备使用申请表",
          time: "2024-02-22",
        }
      ]
    }
  },
};
</script>
 
<style lang="scss" scoped>
.slide-one {
  height: 320px;
  background: url(../assets/img/home-banner.png) no-repeat center;
  background-size: cover;
}
.slide-two {
  height: 320px;
  background: url(../assets/img/home-banner.png) no-repeat center;
  background-size: cover;
}
.slide-three {
  height: 320px;
  background: url(../assets/img/home-banner.png) no-repeat center;
  background-size: cover;
}
.common-container {
  padding: 0;
  .el-container {
    flex-direction: column;
  }
  header {
    height: 100px;
    width: 1200px;
    margin-top: -50px;
    background: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    position: relative;
    z-index: 999;
    ul {
      display: flex;
      align-items: center;
      height: 100px;
      li {
        flex: 1;
        display: flex;
        justify-content: center;
        > div {
          p {
            font-weight: bold;
            font-size: 32px;
            color: #323232;
          }
          span {
            font-weight: 400;
            font-size: 14px;
            color: #323232;
          }
        }
      }
    }
  }
}
.link-list {
  height: 272px;
  overflow: hidden;
}
.equip {
  width: 100%;
  height: 350px;
  background: url(../assets/img/home-equip.jpg) center;
  background-size: cover;
  margin: 12px auto;
  padding-top: 20px;
  h2 {
    color: #0066cc;
    font-size: 28px;
    line-height: 60px;
    height: 60px;
    display: block;
    text-align: center;
  }
  p {
    color: #0066cc;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
  }
  ul {
    height: 220px;
    display: flex;
    li {
      flex: 1;
      margin: 10px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s;
      cursor: pointer;
      &:hover {
        img {
          transform: scale(1.2);
        }
        span {
          background-color: #ea6914;
        }
      }
      img {
        width: 100%;
        height: 200px;
        transition: all 0.3s;
      }
      span {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        line-height: 40px;
        background: #0066cc;
        opacity: 0.8;
        text-align: center;
        color: #fff;
      }
    }
  }
}
.btn-list {
  height: 374px;
  display: flex;
  flex-direction: column;
  li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    border-radius: 6px;
    background: #11a0ac;
    user-select: none;
    cursor: pointer;
    transition: all .3s;
    &:hover {
      opacity: .7;
    }
    & + li {
      margin-top: 15px;
    }
    &:nth-child(2) {
      background-color: #df9514;
    }
    &:nth-child(3) {
      background-color: #1675d4;
    }
    &:nth-child(4) {
      background-color: #cc1355;
    }
  }
}
</style>