搞搞搞

src/App.vue

@@ -7,13 +7,16 @@
     />
     <div class="test" />
     <router-view />
+
+    <tool-list class="tool-list" />
   </div>
 </template>
 
 <script setup>
 // import { onClickOutside } from '@vueuse/core'
-import ProgressComp from "@/components/ProgressComp.vue"
 import { computed, inject, ref } from 'vue'
+import ProgressComp from "@/components/ProgressComp.vue"
+import ToolList from "@/components/ToolList.vue"
 
 const {
   windowSizeInCssForRef,
@@ -65,9 +68,9 @@ input, textarea {
 // }
 
 // 滚动条
-::-webkit-scrollbar { background: #dddecc; width: 0.3rem; height: 0.3rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 0.15rem; }
-::-webkit-scrollbar-corner { background: #dddecc; }
+// ::-webkit-scrollbar { background: #dddecc; width: 0.3rem; height: 0.3rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+// ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 0.15rem; }
+// ::-webkit-scrollbar-corner { background: #dddecc; }
 
 // vue组件过渡效果
 .fade-out-leave-active {
@@ -141,5 +144,10 @@ input, textarea {
     height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
     background-color: #fff;
   }
+  >.tool-list{
+    position: absolute;
+    width: 100%;
+    bottom: 34px;
+  }
 }
 </style>

src/components/ProgressComp.vue

@@ -28,7 +28,6 @@ const {
 
 <style lang="less" scoped>
 .progress{
-  background-color: red;
   display: flex;
   justify-content: space-between;
   align-items: center;

src/components/ToolList.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="tool-list">
+    <ul
+      ref="toolListEl"
+      @scroll="onToolListElScroll"
+      @touchmove.prevent
+    >
+      <li
+        v-for="toolItem in toolList"
+        :key="toolItem.name"
+      >
+        <div
+          class="tool-frame"
+          :class="{
+            active: toolItem.selected,
+          }"
+        >
+          <img
+            class=""
+            :class="{
+              active: toolItem.selected,
+            }"
+            :src="toolItem.url"
+            alt=""
+            draggable="false"
+          >
+        </div>
+        <span
+          class="tool-name"
+          :class="{
+            active: toolItem.selected,
+          }"
+        >{{ toolItem.name }}</span>
+      </li>
+    </ul>
+    <button
+      v-show="isShowLeftArrow"
+      class="arrow-left"
+      @click="onClickLeftArrow"
+    >
+      <img
+        class=""
+        src="@/assets/images/arrow-left.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+    <button
+      v-show="isShowRightArrow"
+      class="arrow-right"
+      @click="onClickRightArrow"
+    >
+      <img
+        class=""
+        src="@/assets/images/arrow-right.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue"
+import penUrl from '@/assets/images/pen.png'
+import knifeUrl from '@/assets/images/knife.png'
+import paintUrl from '@/assets/images/paint.png'
+import rollerUrl from '@/assets/images/roller.png'
+import mushroomUrl from '@/assets/images/mushroom.png'
+import copyingPaperUrl from '@/assets/images/copying-paper.png'
+import rubberBoardUrl from '@/assets/images/rubber-board.png'
+import engravingPaperUrl from '@/assets/images/engraving-paper.png'
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const toolList = ref([
+  {
+    name: '笔',
+    selected: true,
+    url: penUrl,
+  },
+  {
+    name: '刻刀',
+    selected: false,
+    url: knifeUrl,
+  },
+  {
+    name: '颜料',
+    selected: false,
+    url: paintUrl,
+  },
+  {
+    name: '滚筒',
+    selected: false,
+    url: rollerUrl,
+  },
+  {
+    name: '木蘑菇',
+    selected: false,
+    url: mushroomUrl,
+  },
+  {
+    name: '复写纸',
+    selected: false,
+    url: copyingPaperUrl,
+  },
+  {
+    name: '胶版',
+    selected: false,
+    url: rubberBoardUrl,
+  },
+  {
+    name: '版画纸',
+    selected: false,
+    url: engravingPaperUrl,
+  },
+])
+
+const toolListEl = ref(null)
+const isShowLeftArrow = ref(false)
+const isShowRightArrow = ref(true)
+function onToolListElScroll() {
+  if (toolListEl.value.scrollLeft === 0) {
+    isShowLeftArrow.value = false
+  } else {
+    isShowLeftArrow.value = true
+  }
+  if (toolListEl.value.scrollWidth - toolListEl.value.scrollLeft - toolListEl.value.clientWidth === 0) {
+    isShowRightArrow.value = false
+  } else {
+    isShowRightArrow.value = true
+  }
+}
+function onClickLeftArrow() {
+  toolListEl.value.scrollLeft -= toolListEl.value.scrollWidth / 8
+}
+function onClickRightArrow() {
+  toolListEl.value.scrollLeft += toolListEl.value.scrollWidth / 8
+}
+</script>
+
+<style lang="less" scoped>
+.tool-list{
+  >ul{
+    display: flex;
+    overflow: auto;
+    &::-webkit-scrollbar { height: 0; };
+    >li{
+      flex: 0 0 auto;
+      display: inline-block;
+      text-align: center;
+      margin-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+      >.tool-frame{
+        width: calc(83 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(83 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background: rgba(255,255,255,0.3);
+        border-radius: 2px 2px 2px 2px;
+        border: 1px solid #FFFFFF;
+        margin-bottom: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+        position: relative;
+        >img{
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          height: 100%;
+        }
+        >img.active{
+          width: 125%;
+          height: 125%;
+        }
+      }
+      >.tool-frame.active{
+        border: 4px solid #FFE096;
+      }
+      >span{
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 16px;
+      }
+      >span.active{
+        font-size: 14px;
+        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+        font-weight: bold;
+        color: #FFE096;
+        line-height: 16px;
+      }
+    }
+    >li:first-of-type{
+      margin-left: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    }
+    >li:last-of-type{
+      margin-right: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    }
+  }
+  >button.arrow-left{
+    position: absolute;
+    left: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    top: calc(42.5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateY(-50%);
+    height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    >img{
+      height: 100%;
+    }
+  }
+  >button.arrow-right{
+    position: absolute;
+    right: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    top: calc(42.5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateY(-50%);
+    height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    >img{
+      height: 100%;
+    }
+  }
+}
+</style>