[Add] image slider

src/components/Header.vue

@@ -67,7 +67,7 @@ a {
 
 </style>
 
-<style>
+<style scoped>
 .el-sub-menu__title {
     font-size: 18px;
 }

src/components/Main.vue

@@ -4,6 +4,7 @@ import Abstract from './sections/Abstract.vue'
 import BibTeX from './sections/BibTeX.vue'
 import Carousel from './sections/Carousel.vue'
 import Video from './sections/Video.vue'
+import ImageSlider from './sections/ImageSlider.vue'
 
 export default {
   components: {
@@ -12,6 +13,7 @@ export default {
     BibTeX,
     Carousel,
     Video,
+    ImageSlider,
   }
 }
 </script>
@@ -21,5 +23,6 @@ export default {
     <Video/>
     <Carousel/>
     <Abstract/>
+    <ImageSlider/>
     <BibTeX/>
 </template>

src/components/sections/BibTeX.vue

@@ -39,7 +39,7 @@ export default {
     <el-row>
       <el-col class='bibtex' :xs="20" :sm="20" :md="14" :lg="12" :xl="12">
         <el-scrollbar style="margin: 10px 20px 5px 20px;" @click="copyVal()">
-          <div style="text-align: center; color: #c4c4c4;">Click here to copy BibTex.</div> 
+          <div style="text-align: center; color: var(--el-text-color-secondary);">Click here to copy BibTex.</div> 
           <pre><code v-for="b in bibtex" class="code">{{ b }}<br/></code></pre>
         </el-scrollbar>
       </el-col>

src/components/sections/ImageSlider.vue

@@ -0,0 +1,88 @@
+<script>
+export default {
+  data() {
+    return {
+      sliderValue: 0, // 滑块的值
+      inputImagePath:  './image_slider/huaqiang/input/', // 图片存放路径
+      outputImagePath: './image_slider/huaqiang/output/',
+      minValue: 0,
+      maxValue: 9,
+    };
+  },
+  computed: {
+    // 根据滑块的值构建图片的资源路径
+    inputImageSrc() {
+      return `${this.inputImagePath}${this.sliderValue}.png`;
+    },
+    outputImageSrc() {
+      return `${this.outputImagePath}${this.sliderValue}.png`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="bg">
+    <el-row>
+      <h1 class="title1">Image Slider</h1>
+    </el-row>
+    <el-row>
+      <el-col :xs="20" :sm="20" :md="16" :lg="12" :xl="12">
+        <el-row justify="space-evenly">
+            <el-col :xs="10" :sm="10" :md="8" :lg="6" :xl="6">
+                <div class="demo-image">
+                    <div class="block">
+                        <el-image :src="inputImageSrc" fit="scale-down"/>
+                        <span class="demonstration">input</span>
+                    </div>
+                </div>
+            </el-col>
+            <el-col :xs="10" :sm="10" :md="8" :lg="6" :xl="6">
+                <div class="demo-image">
+                    <div class="block">
+                        <el-image :src="outputImageSrc" fit="scale-down"/>
+                        <span class="demonstration">output</span>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+    </el-col>
+    </el-row>
+    <el-row>
+      <el-col :xs="20" :sm="20" :md="16" :lg="12" :xl="12">
+        <div class="slider-demo-block">
+            <el-slider v-model="sliderValue" show-input :min="minValue" :max="maxValue" />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+}
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+  margin-bottom: 15px;
+}
+
+.demo-image .block {
+  padding: 20px 0 0 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  display: inline-block;
+  width: 100%;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+.demo-image .block:last-child {
+  border-right: none;
+}
+.demo-image .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+}
+</style>