修改遮挡问题

Reviewed-on: https://git.1000my.com/project-shenyangk11/sy_k11_H_base_daoshi_vue_ts/pulls/21
3 years ago · 8ffd7f66d6
12 changed files with 198 additions and 36 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,13 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## [1.1.0-B.8](https://git.1000my.com/project-shenyangk11/sy_k11_H_base_daoshi_vue_ts/compare/v1.1.0-B.7...v1.1.0-B.8) (2023-06-16)
+
+
+### Features
+
+* 🚀 修改文字遮挡问题 ([50769ea](https://git.1000my.com/project-shenyangk11/sy_k11_H_base_daoshi_vue_ts/commit/50769ea9565aef0e9668c902525cc41005a43424))
+
 ## [1.1.0-B.7](https://git.1000my.com/project-shenyangk11/sy_k11_H_base_daoshi_vue_ts/compare/v1.1.0-B.6...v1.1.0-B.7) (2023-06-09)


--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "vue_cli_ts",
-  "version": "1.1.0-B.7",
+  "version": "1.1.0-B.8",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "vue_cli_ts",
-      "version": "1.1.0-B.7",
+      "version": "1.1.0-B.8",
      "dependencies": {
        "@better-scroll/core": "^2.5.0",
        "@better-scroll/observe-image": "^2.5.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vue_cli_ts",
-  "version": "1.1.0-B.7",
+  "version": "1.1.0-B.8",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
--- a/public/static/offline/JSON/getServeList.json
+++ b/public/static/offline/JSON/getServeList.json
@ -1 +1,77 @@
-{"code":200,"msg":"操作成功","data":{"serveList":[]}}
+{
+    "code": 200,
+    "msg": "操作成功",
+    "data": {
+        "serveList": [
+            {
+                "name": "母婴室拉萨酱豆腐路上看见独立房间数量大幅",
+                "nameEn": "muyingshi",
+                "logoUrl": "/iotFile/project-n-ww5jvpwnu0ads70lbkda/20230509/DuK2J6y7qyGJDBxpxVQS3.png",
+                "fileUrl": "/iotFile/project-n-ww5jvpwnu0ads70lbkda/20230509/_EMy-K7nCJOXBMEaIq6CC.png",
+                "qrUrl": "",
+                "content": "母婴室信息",
+                "contentEn": "muyingshi",
+                "isPoint": 2,
+                "building": "",
+                "buildingCode": "",
+                "buildingOrder": 0,
+                "floor": "",
+                "floorCode": "",
+                "floorOrder": 0,
+                "point": -1
+            },
+            {
+                "name": "体温计阿斯利康的飞机老师酱豆腐立刻撒旦解放了",
+                "nameEn": "tiwenj",
+                "logoUrl": "/iotFile/project-n-ww5jvpwnu0ads70lbkda/20230509/8HjKGhry5r4JGJ1Cdlo3e.png",
+                "fileUrl": "/iotFile/project-n-ww5jvpwnu0ads70lbkda/20230509/YzpHFa2tq1y0Y9g92leE9.png",
+                "qrUrl": "",
+                "content": "体温计",
+                "contentEn": "tiwenj",
+                "isPoint": 2,
+                "building": "",
+                "buildingCode": "",
+                "buildingOrder": 0,
+                "floor": "",
+                "floorCode": "",
+                "floorOrder": 0,
+                "point": -1
+            },
+            {
+                "name": "血压计",
+                "nameEn": "xueyaji",
+                "logoUrl": "/iotFile/project-n-ww5jvpwnu0ads70lbkda/20230509/pUPfu0ibaBHzTdrT8OsMK.png",
+                "fileUrl": "/iotFile/project-n-ww5jvpwnu0ads70lbkda/20230509/a0c-LW4BYv_YlnFvF2hor.png",
+                "qrUrl": "",
+                "content": "血压计",
+                "contentEn": "xueyaji",
+                "isPoint": 2,
+                "building": "",
+                "buildingCode": "",
+                "buildingOrder": 0,
+                "floor": "",
+                "floorCode": "",
+                "floorOrder": 0,
+                "point": -1
+            },
+            {
+                "name": "穿梭巴士",
+                "nameEn": "scbs",
+                "logoUrl": "/iotFile/project-n-ww5jvpwnu0ads70lbkda/20230509/wbQwJw3IGvaUKo1fxwqJE.png",
+                "fileUrl": "/iotFile/project-n-ww5jvpwnu0ads70lbkda/20230509/XxPPvgPGDCQPqQpwmwxmx.png",
+                "qrUrl": "",
+                "content": "穿梭巴士",
+                "contentEn": "csbs",
+                "isPoint": 2,
+                "building": "",
+                "buildingCode": "",
+                "buildingOrder": 0,
+                "floor": "",
+                "floorCode": "",
+                "floorOrder": 0,
+                "point": -1
+            }
+            
+        ]
+    }
+}
--- a/src/base/Marquees/Marquees.vue
+++ b/src/base/Marquees/Marquees.vue
@ -1,7 +1,7 @@
 <template>
  <div ref="wrapElRef" class="wrap-el">
    <div ref="contentElRef" class="content" :class="state.animationClass" :style="contentStyle" @animationend="animationend">
-      <slot></slot>
+      <slot :is-roll="state.animationClass.length > 0"></slot>
    </div>
  </div>
 </template>
--- a/src/composables/useMapNavControl.ts
+++ b/src/composables/useMapNavControl.ts
@ -8,7 +8,7 @@ export const useMapNavControl = () => {

  //重播
  function handleReplay() {
-    window.Map_QM.util.changePlaySpeed(20)
+    window.Map_QM.util.changePlaySpeed(13)
    replay.value = true
    pause.value = false
    speedUp.value = false
@ -37,7 +37,7 @@ export const useMapNavControl = () => {
    speedUp.value = !speedUp.value
    window.Map_QM.pathStop(true)
    nextTick(() => {
-      speedUp.value ? window.Map_QM.util.changePlaySpeed(25) : window.Map_QM.util.changePlaySpeed(20)
+      speedUp.value ? window.Map_QM.util.changePlaySpeed(16) : window.Map_QM.util.changePlaySpeed(13)
    })
  }

@ -48,7 +48,7 @@ export const useMapNavControl = () => {
  onBeforeUnmount(() => {
    clearTimeout(replayTimer.value)
    replayTimer.value = null
-    window.Map_QM.util.changePlaySpeed(20)
+    window.Map_QM.util.changePlaySpeed(13)
  })

  return { replay, pause, speedUp, handleReplay, togglePause, handleSpeedUp, resetPause }
--- a/src/views/Art/Art.vue
+++ b/src/views/Art/Art.vue
@ -524,7 +524,7 @@ function clickGo(item: ArtItem) {
    left: 32px;
    overflow: hidden;
    width: 476px;
-    height: 806px;
+    height: 775px;
    padding-right: 20px;
  }
  .map-right-scroll {
@ -533,7 +533,7 @@ function clickGo(item: ArtItem) {
    left: 1006px;
    overflow: hidden;
    width: 476px;
-    height: 806px;
+    height: 775px;
    padding-right: 20px;
  }
  .right-bg {
--- a/src/views/Art/ArtMapItem.vue
+++ b/src/views/Art/ArtMapItem.vue
@ -4,9 +4,9 @@
    <img class="banner" :src="artInfo?.urlList[0]" alt="" />
    <div class="intro-container">
      <!-- 标题 -->
-      <h3 class="art-title">{{ switchLanguage(artInfo, 'artworkName') }}</h3>
+      <div class="art-title">{{ switchLanguage(artInfo, 'artworkName') }}</div>
      <!-- 作者 -->
-      <h5 class="art-author">{{ artInfo.author }}</h5>
+      <div class="art-author">{{ artInfo.author }}</div>
      <!-- 介绍 -->
      <div class="art-intro">
        <p>{{ artInfo.creationYear }}</p>
@ -44,7 +44,8 @@ function clickGo() {
  position: relative;
  width: 456px;
  height: 150px;
-  padding: 8px;
+  padding: 0;
+  padding-left: 8px;
  margin-bottom: 14px;
  background: rgb(255 255 255 / 80%);
  border-radius: 12px;
@ -53,6 +54,7 @@ function clickGo() {
    display: inline-block;
    width: 240px;
    height: 135px;
+    object-fit: contain;
    border-radius: 8px;
  }
  .intro-container {
@ -62,7 +64,9 @@ function clickGo() {

    .art-title {
      max-width: 170px;
-      height: 19px;
+      height: 21px;
+      padding-top: 4px;
+      padding-bottom: 2px;
      font-size: 14px;
      font-family: 'font_bold';
      color: #736661;
@ -73,7 +77,9 @@ function clickGo() {
    }
    .art-author {
      max-width: 170px;
-      height: 17px;
+      height: 18px;
+      padding-top: 4px;
+      padding-bottom: 2px;
      margin-top: 2px;
      font-size: 10px;
      font-family: 'font_bold';
--- a/src/views/Art/ArtRightItem.vue
+++ b/src/views/Art/ArtRightItem.vue
@ -46,6 +46,7 @@ function clickGo() {
    width: 160px;
    height: 90.4px;
    border-radius: 8px;
+    object-fit: contain;
  }
  .intro-container {
    display: inline-block;
--- a/src/views/Member/Member.vue
+++ b/src/views/Member/Member.vue
@ -1,5 +1,5 @@
 <template>
-  <typeBtnGroup class="top" :list="list" @change-type="change" />
+  <typeBtnGroup v-if="false" class="top" :list="list" @change-type="change" />
  <transition appear enter-active-class="animate__animated animate__fadeIn">
    <div v-if="current === 0" class="carousel">
      <Carousel :ac-list="goldMemberInfo" />
--- a/src/views/Nav/Nav.vue
+++ b/src/views/Nav/Nav.vue
@ -433,7 +433,7 @@ watch(shop, newVal => {
      height: 410px;
      img {
        width: 100%;
-        object-fit: scale-down;
+        object-fit: contain;
        border-radius: 13.2364px;
      }
      &.stay-tuned {
--- a/src/views/ServiceList/ServiceList.vue
+++ b/src/views/ServiceList/ServiceList.vue
@ -1,14 +1,34 @@
 <template>
  <div class="po">{{ $t('service') }}</div>
  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut">
-    <div class="list-container">
-      <div class="list">
-        <div v-for="item in serviceList" :key="item.name" class="list-item">
-          <img :src="item.logoUrl" alt="" />
-          <div class="text">{{ switchLanguage(item, 'name') }}</div>
+    <scrollView
+      ref="service-scroll"
+      class="service-scroll"
+      :pull-up="false"
+      :scroll-x="true"
+      :list="serviceList"
+      :refresh-delay="200"
+      :scrollbar="false"
+      :class="{ 'no-scroll': serviceList.length <= 12 }"
+    >
+      <div class="list-container" :class="{ 'no-scroll': serviceList.length <= 12 }">
+        <div class="list" :style="{ width: Math.ceil(serviceList.length / 2) * 208 + 'px' }">
+          <div v-for="item in serviceList" :key="item.name" class="list-item">
+            <img :src="item.logoUrl" alt="" />
+            <div class="text">{{ switchLanguage(item, 'name') }}</div>
+            <!-- <div class="marquee-wrapper">
+              <Marquees class="name" :content="switchLanguage(item, 'name')">
+                <template #default="obj">
+                  <div :style="{ textAlign: obj.isRoll === false ? 'center' : null, paddingLeft: obj.isRoll === false ? '20px' : null }">
+                    {{ switchLanguage(item, 'name') }}
+                  </div>
+                </template>
+              </Marquees>
+            </div> -->
+          </div>
        </div>
      </div>
-    </div>
+    </scrollView>
  </transition>
  <div class="btn" @click="go">
    <div class="text-container">
@ -19,10 +39,12 @@
 </template>

 <script setup lang="ts">
+import scrollView from '@/base/ScrollView/ScrollView.vue'
 import { ref, toRefs } from 'vue'
 import { useRootStore } from '@/store/root'
 import { getServiceList } from '@/http/api/serviceList/index'
 import { useFacilityNav } from '@/composables/useFacilityNav'
+import Marquees from '@/base/Marquees/Marquees.vue'

 const store = useRootStore()
 const { facilityList } = toRefs(store)
@ -52,29 +74,79 @@ function go() {
  font-weight: 400;
  line-height: 32px;
 }
-.list-container {
-  @include fl(center);
+.service-scroll {
+  position: absolute;
+  top: 224px;
+  left: 320px;
+  z-index: 1;
+  overflow: hidden;
+  width: 1276px;
+  height: 482px;
+  &.no-scroll {
+    left: 378px;
+    width: 1164px;
+  }
+  .list-container {
+    // @include fl(center);

-  position: fixed;
-  top: 244px;
-  left: 0;
-  width: 1920px;
-  .list {
-    display: grid;
-    gap: 86px 84px;
-    grid-template-rows: 1fr 1fr;
-    grid-auto-flow: column;
+    // position: fixed;
+    // top: 244px;
+    // left: 0;
+    // width: 1920px;
+    &.no-scroll {
+      display: flex;
+      justify-content: center;
+      width: 1164px;
+    }
+
+    // display: grid;
+    // gap: 86px 84px;
+    // grid-template-rows: 1fr 1fr;
+    // grid-template-columns: repeat(auto-fill, 124px);
+    // grid-auto-flow: column;
+    width: fit-content;
+    .list {
+      display: flex;
+      height: 482px;
+      flex-flow: column wrap;
+      padding-right: 0;
+      gap: 86px 84px;
+    }
    .list-item {
+      // margin-right: 84px;
+      // margin-bottom: 86px;
+      flex-shrink: 0;
      width: 124px;
      height: 155px;
      text-align: center;
      img {
-        width: 105px;
-        height: 105px;
+        width: 124px;
+        height: 124px;
        margin-bottom: 28px;
        border-radius: 50%;
      }
      .text {
+        width: 124px;
+        padding-top: 3px;
+        padding-bottom: 0;
+        font-size: 20px;
+        font-family: 'font_regular';
+        color: rgb(0 0 0 / 60%);
+        font-style: normal;
+        font-weight: 400;
+        line-height: 23px;
+
+        @include more-wrap(2);
+      }
+      .marquee-wrapper {
+        overflow: hidden;
+        width: 124px;
+        margin-left: 0;
+        white-space: nowrap;
+      }
+      .name {
+        // display: inline-block;
+        height: 23px;
        font-size: 20px;
        font-family: 'font_regular';
        color: rgb(0 0 0 / 60%);