Merge branch 'master' of http://face3d.4dage.com:7005/chenzhiguang/guangdongVR_museum

backstage/src/assets/styles/reset.css

@@ -197,3 +197,6 @@ textarea {
   color: #ccc !important;
   pointer-events: none !important;
 }
+.goodNameInput input {
+  padding-right: 70px !important;
+}

backstage/src/assets/styles/reset.less

@@ -110,4 +110,7 @@ textarea{
 .disabledAc{
 	color: #ccc !important;
 	pointer-events: none !important;
+}
+.goodNameInput input {
+	padding-right: 70px !important;
 }

backstage/src/components/ww-card/index.vue

@@ -12,6 +12,10 @@ export default {
 }
 </script>
 <style scoped>
+.theme-color1{
+  width: 130px;
+  word-break: break-all;
+}
 .ww-layout{
   width:100%;
   height:200px;

backstage/src/pages/content/collection/componets/audio.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width:50%;">
     <el-form-item label="藏品名称：" prop="name">
-      <el-input v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
+      <el-input class="goodNameInput" v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
     </el-form-item>
 
     <el-form-item label="藏品类型：">

backstage/src/pages/content/collection/componets/img.vue

@@ -2,6 +2,7 @@
   <div style="width: 50%">
     <el-form-item label="藏品名称：" prop="name">
       <el-input
+       class="goodNameInput"
         v-model="form.name"
         :maxlength="INPUTLENGTH * 5"
         show-word-limit

backstage/src/pages/content/collection/componets/model.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width:50%;">
     <el-form-item label="藏品名称：" prop="name">
-      <el-input v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
+      <el-input class="goodNameInput" v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
     </el-form-item>
 
     <el-form-item label="藏品类型：">

backstage/src/pages/content/collection/componets/video.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width:50%;">
     <el-form-item label="藏品名称：" prop="name">
-      <el-input v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
+      <el-input class="goodNameInput" v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
     </el-form-item>
 
     <el-form-item label="藏品类型：">

backstage/src/pages/content/scene/componets/detail.vue

@@ -3,62 +3,105 @@
     <div class="formtop">
       <div class="left">
         <el-form-item label="场景名称：" prop="name">
-          <el-input placeholder="请输入场景名称" :maxlength="INPUTLENGTH" show-word-limit
-            v-model="form.name"></el-input>
+          <el-input
+            placeholder="请输入场景名称"
+            :maxlength="INPUTLENGTH"
+            show-word-limit
+            v-model="form.name"
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="场景类型：" prop="type">
           <el-input v-model="form.type" class="fadeDom"></el-input>
-          <el-select v-model="form.type" placeholder="请选择" style="width:100%">
-            <el-option v-for="item in sceneTypes" :key="item.id" :label="item.name" :value="item.id">
+          <el-select
+            v-model="form.type"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in sceneTypes"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
 
-        <el-form-item v-if="form.type=='temp'" label="展览时间：" prop="opening">
+        <el-form-item
+          v-if="form.type == 'temp'"
+          label="展览时间："
+          prop="opening"
+        >
           <el-input v-model="form.type" class="fadeDom"></el-input>
-          <el-date-picker type="datetimerange" 
-            style="width:100%;"
+          <el-date-picker
+            type="datetimerange"
+            style="width: 100%"
             size="large"
             format="yyyy 年 MM 月 dd 日 HH:mm:ss"
-            value-format='yyyy-MM-dd HH:mm:ss'
-           :picker-options="pickerOptions" range-separator="-"
-            start-placeholder="开始日期" end-placeholder="结束日期" v-model="form.opening" align="center">
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :picker-options="pickerOptions"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            v-model="form.opening"
+            align="center"
+          >
           </el-date-picker>
         </el-form-item>
 
         <el-form-item label="所属博物馆：" prop="museumId">
           <el-input v-model="form.museumId" class="fadeDom"></el-input>
-          <el-select v-model="form.museumId" placeholder="请选择" style="width:100%">
-            <el-option v-for="item in museumList" :key="item.id" :label="item.name" :value="item.id">
+          <el-select
+            @change="changeSelect"
+            v-model="form.museumId"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in museumList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
 
         <el-form-item label="封面图片：" prop="thumb">
-          <uploadThumb :data="{type:'thumb'}" :url="thumbUrl" @update="data=>{form.thumb = data}" :thumb="form.thumb" />
+          <uploadThumb
+            :data="{ type: 'thumb' }"
+            :url="thumbUrl"
+            @update="
+              (data) => {
+                form.thumb = data;
+              }
+            "
+            :thumb="form.thumb"
+          />
         </el-form-item>
 
         <el-form-item label="描述：">
-          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.description"  maxlength="200" show-word-limit></el-input>
+          <el-input
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            v-model="form.description"
+            maxlength="200"
+            show-word-limit
+          ></el-input>
         </el-form-item>
       </div>
-
     </div>
-
-
   </div>
 </template>
 
 <script>
-
 import uploadThumb from "@/components/uploadThumb";
 
-import {getMuseumAllList} from "@/configue/api";
-
+import { getMuseumAllList } from "@/configue/api";
 
 export default {
-  name:'sceneEdit',
+  name: "sceneEdit",
   props: ["data", "rule", "roleList"],
   components: { uploadThumb },
   data() {
@@ -67,50 +110,59 @@ export default {
       form: this.data,
       radio: "选中且禁用",
       thumbUrl: this.$serverName + "cms/exhibition/upload",
-      sceneTypes: [{
-        id: 'long',
-        name: '常设展览'
-      }, {
-        id: 'temp',
-        name: '临时展览'
-      }],
-      museumList:[],
+      sceneTypes: [
+        {
+          id: "long",
+          name: "常设展览",
+        },
+        {
+          id: "temp",
+          name: "临时展览",
+        },
+      ],
+      museumList: [],
       pickerOptions: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-            picker.$emit('pick', [start, end]);
-          }
-        }]
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
       },
     };
   },
   methods: {
-
+    changeSelect(val) {
+      this.form.cityId = this.museumList.find((v) => v.id === val).cityId;
+    },
   },
   mounted() {
-    getMuseumAllList((res)=>{
-      this.museumList = res.data
-    })
+    getMuseumAllList((res) => {
+      this.museumList = res.data;
+    });
   },
 };
 </script>
@@ -126,7 +178,7 @@ export default {
     justify-content: flex-start;
     position: relative;
 
-    >div {
+    > div {
       width: 40%;
 
       &:first-of-type {
@@ -142,7 +194,7 @@ export default {
 </style>
 
 <style lang="less">
-.el-date-editor .el-range-input{
+.el-date-editor .el-range-input {
   width: 49%;
 }
 </style>

backstage/src/pages/content/scene/data.js

@@ -37,6 +37,7 @@ let formKey = {
     "timeEnd": "",
     "timeStart": "",
     "type": "",
+    "cityId":"",
     opening:'',
     thumb:'',
     description:''

backstage/src/pages/system/dict/componets/detail.vue

@@ -19,7 +19,7 @@
         </el-form-item>
 
         <el-form-item label="是否显示：">
-          <el-switch v-model="form.display"> </el-switch>
+          <el-switch :active-value='1' :inactive-value='0' v-model="form.display"> </el-switch>
         </el-form-item>
 
       </div>

code/src/assets/css/reset.css

@@ -8,9 +8,10 @@
    # Global selectors
    # ================================================================= */
 
-   html {
+html {
     box-sizing: border-box;
-    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
+    -webkit-text-size-adjust: 100%;
+    /* Prevent adjustments of font size after orientation changes in iOS */
     word-break: normal;
     -moz-tab-size: 4;
     tab-size: 4;
@@ -19,22 +20,25 @@
 *,
 ::before,
 ::after {
-    background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
+    background-repeat: no-repeat;
+    /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
     box-sizing: inherit;
     appearance: none;
-    -webkit-tap-highlight-color: rgba(255,255,255,0);
-    text-rendering: optimizeLegibility!important;
-    -webkit-font-smoothing: antialiased!important;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    text-rendering: optimizeLegibility !important;
+    -webkit-font-smoothing: antialiased !important;
 }
 
 ::before,
 ::after {
-    text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
+    text-decoration: inherit;
+    /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
     vertical-align: inherit;
 }
 
 * {
-    padding: 0; /* Reset `padding` and `margin` of all elements */
+    padding: 0;
+    /* Reset `padding` and `margin` of all elements */
     margin: 0;
     list-style: none;
 }
@@ -44,58 +48,71 @@
      # ================================================================= */
 
 hr {
-    overflow: visible; /* Show the overflow in Edge and IE */
-    height: 0; /* Add the correct box sizing in Firefox */
-    color: inherit; /* Correct border color in Firefox. */
+    overflow: visible;
+    /* Show the overflow in Edge and IE */
+    height: 0;
+    /* Add the correct box sizing in Firefox */
+    color: inherit;
+    /* Correct border color in Firefox. */
 }
 
 details,
 main {
-    display: block; /* Render the `main` element consistently in IE. */
+    display: block;
+    /* Render the `main` element consistently in IE. */
 }
 
 summary {
-    display: list-item; /* Add the correct display in all browsers */
+    display: list-item;
+    /* Add the correct display in all browsers */
 }
 
 small {
-    font-size: 80%; /* Set font-size to 80% in `small` elements */
+    font-size: 80%;
+    /* Set font-size to 80% in `small` elements */
 }
 
 [hidden] {
-    display: none; /* Add the correct display in IE */
+    display: none;
+    /* Add the correct display in IE */
 }
 
 abbr[title] {
-    border-bottom: none; /* Remove the bottom border in Chrome 57 */
+    border-bottom: none;
+    /* Remove the bottom border in Chrome 57 */
     /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
     text-decoration: underline;
     text-decoration: underline dotted;
 }
 
 a {
-    background-color: transparent; /* Remove the gray background on active links in IE 10 */
+    background-color: transparent;
+    /* Remove the gray background on active links in IE 10 */
 }
 
 a:active,
 a:hover {
-    outline-width: 0; /* Remove the outline when hovering in all browsers */
+    outline-width: 0;
+    /* Remove the outline when hovering in all browsers */
 }
 
 code,
 kbd,
 pre,
 samp {
-    font-family: monospace, monospace; /* Specify the font family of code elements */
+    font-family: monospace, monospace;
+    /* Specify the font family of code elements */
 }
 
 pre {
-    font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
+    font-size: 1em;
+    /* Correct the odd `em` font sizing in all browsers */
 }
 
 b,
 strong {
-    font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
+    font-weight: bolder;
+    /* Add the correct font weight in Chrome, Edge, and Safari */
 }
 
 /* https://gist.github.com/unruthless/413930 */
@@ -116,8 +133,10 @@ sup {
 }
 
 table {
-    border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
-    text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
+    border-color: inherit;
+    /* Correct border color in all Chrome, Edge, and Safari. */
+    text-indent: 0;
+    /* Remove text indentation in Chrome, Edge, and Safari */
 }
 
 /* # =================================================================
@@ -130,7 +149,13 @@ input {
     outline: none;
 }
 
-input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }
+input[type=button],
+input[type=submit],
+input[type=file],
+button {
+    cursor: pointer;
+    -webkit-appearance: none;
+}
 
 /* Replace pointer cursor in disabled elements */
 [disabled] {
@@ -140,21 +165,27 @@ input[type=button], input[type=submit], input[type=file], button { cursor: point
 
 [type='number']::-webkit-inner-spin-button,
 [type='number']::-webkit-outer-spin-button {
-    height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
+    height: auto;
+    /* Correct the cursor style of increment and decrement buttons in Chrome */
 }
 
 [type='search'] {
-    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
-    outline-offset: -2px; /* Correct the outline style in Safari */
+    -webkit-appearance: textfield;
+    /* Correct the odd appearance in Chrome and Safari */
+    outline-offset: -2px;
+    /* Correct the outline style in Safari */
 }
 
 [type='search']::-webkit-search-decoration {
-    -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
+    -webkit-appearance: none;
+    /* Remove the inner padding in Chrome and Safari on macOS */
 }
 
 textarea {
-    overflow: auto; /* Internet Explorer 11+ */
-    resize: vertical; /* Specify textarea resizability */
+    overflow: auto;
+    /* Internet Explorer 11+ */
+    resize: vertical;
+    /* Specify textarea resizability */
 }
 
 button,
@@ -162,20 +193,24 @@ input,
 optgroup,
 select,
 textarea {
-    font: inherit; /* Specify font inheritance of form elements */
+    font: inherit;
+    /* Specify font inheritance of form elements */
 }
 
 optgroup {
-    font-weight: bold; /* Restore the font weight unset by the previous rule */
+    font-weight: bold;
+    /* Restore the font weight unset by the previous rule */
 }
 
 button {
-    overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
+    overflow: visible;
+    /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
 }
 
 button,
 select {
-    text-transform: none; /* Firefox 40+, Internet Explorer 11- */
+    text-transform: none;
+    /* Firefox 40+, Internet Explorer 11- */
 }
 
 /* Apply cursor pointer to button elements */
@@ -206,10 +241,12 @@ button:-moz-focusring,
 }
 
 button,
-  html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
-  [type='reset'],
-  [type='submit'] {
-    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
+html [type='button'],
+/* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
+[type='reset'],
+[type='submit'] {
+    -webkit-appearance: button;
+    /* Correct the inability to style clickable types in iOS */
 }
 
 /* Remove the default button styling in all browsers */
@@ -231,32 +268,43 @@ textarea:focus {
 
 /* Style select like a standard input */
 select {
-    -moz-appearance: none; /* Firefox 36+ */
-    -webkit-appearance: none; /* Chrome 41+ */
+    -moz-appearance: none;
+    /* Firefox 36+ */
+    -webkit-appearance: none;
+    /* Chrome 41+ */
 }
 
 select::-ms-expand {
-    display: none; /* Internet Explorer 11+ */
+    display: none;
+    /* Internet Explorer 11+ */
 }
 
 select::-ms-value {
-    color: currentColor; /* Internet Explorer 11+ */
+    color: currentColor;
+    /* Internet Explorer 11+ */
 }
 
 legend {
-    border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
-    color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
-    display: table; /* Correct the text wrapping in Edge and IE */
-    max-width: 100%; /* Correct the text wrapping in Edge and IE */
-    white-space: normal; /* Correct the text wrapping in Edge and IE */
-    max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
+    border: 0;
+    /* Correct `color` not being inherited in IE 8/9/10/11 */
+    color: inherit;
+    /* Correct the color inheritance from `fieldset` elements in IE */
+    display: table;
+    /* Correct the text wrapping in Edge and IE */
+    max-width: 100%;
+    /* Correct the text wrapping in Edge and IE */
+    white-space: normal;
+    /* Correct the text wrapping in Edge and IE */
+    max-width: 100%;
+    /* Correct the text wrapping in Edge 18- and IE */
 }
 
 ::-webkit-file-upload-button {
     /* Correct the inability to style clickable types in iOS and Safari */
     -webkit-appearance: button;
     color: inherit;
-    font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
+    font: inherit;
+    /* Change font properties to `inherit` in Chrome and Safari */
 }
 
 /* # =================================================================
@@ -264,7 +312,8 @@ legend {
      # ================================================================= */
 
 img {
-    border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
+    border-style: none;
+    /* Remove border when inside `a` element in IE 8/9/10 */
 }
 
 /* Add the correct vertical alignment in Chrome, Firefox, and Opera */
@@ -292,7 +341,49 @@ progress {
 }
 
 .disabled,
-:disabled{
+:disabled {
     opacity: 0.3 !important;
     pointer-events: none !important;
 }
+
+::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 4px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #c03b3f;
+}
+
+::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px transparent;
+    border-radius: 10px;
+    background: transparent;
+}
+.select-float{
+    background: rgba(182, 30, 34, 0.9) !important;
+    border-radius: 10px !important;
+    padding-bottom: 15px !important;
+}
+.select-replace{
+    width: calc(100% - 3px) !important;
+    background-color: transparent !important;
+}
+.select-replace::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 30px !important;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: var(--font-active) !important;
+}
+.gdmuseum{
+    width: calc(100% - 3px) !important;
+}
+body{
+    background-color: #e8e3d1;
+}

code/src/components/maps/index.vue

@@ -74,6 +74,7 @@ const mapNumChane = async (type) => {
       rowid: item.id,
     };
   });
+  
 
   map.forEach((item) => {
     if (item.sum == 0) {
@@ -137,7 +138,7 @@ const mapNumChane = async (type) => {
         });
     } else {
       $("#state").find(`g[id="${item.id}"] rect`).css({
-        fill: "#999",
+        fill: "#eecc63",
       });
 
       $("#state").find(`g[id="${item.id}"] .st0`).css({
@@ -152,48 +153,48 @@ const mapNumChane = async (type) => {
         fill: "#333333",
       });
 
-      // $("#state").find(`g[id="${item.id}"] text`).css({
-      //   fill: "#5A5A5A",
-      // });
+      $("#state").find(`g[id="${item.id}"] text`).css({
+        fill: "#b61e22",
+      });
 
-      // $("#state").find(`g[id="${item.id}"]`).attr("data-rowId", item.rowid);
+      $("#state").find(`g[id="${item.id}"]`).attr("data-rowId", item.rowid);
 
       // //map
-      // $("#map_1_")
-      //   .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
-      //   .css({
-      //     fill: "#999",
-      //   });
-
-      // $("#map_1_")
-      //   .find(`g[id="${item.id.replace("id", "tag")}"] .st0`)
-      //   .css({
-      //     fill: "#fff",
-      //   });
-
-      // $("#map_1_")
-      //   .find(`g[id="${item.id.replace("id", "tag")}"] .st19`)
-      //   .css({
-      //     fill: "#D9D9D9",
-      //   });
-
-      // $("#map_1_")
-      //   .find(`g[id="${item.id.replace("id", "tag")}"] .st28`)
-      //   .css({
-      //     fill: "#fff",
-      //   });
-
-      // $("#map_1_")
-      //   .find(`g[id="${item.id.replace("id", "tag")}"] text`)
-      //   .css({
-      //     fill: "#5A5A5A",
-      //   });
-
-      // $("#map_1_")
-      //   .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
-      //   .css({
-      //     fill: "#999",
-      //   });
+      $("#map_1_")
+        .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
+        .css({
+          fill: "#b61e22",
+        });
+
+      $("#map_1_")
+        .find(`g[id="${item.id.replace("id", "tag")}"] .st0`)
+        .css({
+          fill: "#b61e22",
+        });
+
+      $("#map_1_")
+        .find(`g[id="${item.id.replace("id", "tag")}"] .st19`)
+        .css({
+          fill: "#eecc63",
+        });
+
+      $("#map_1_")
+        .find(`g[id="${item.id.replace("id", "tag")}"] .st28`)
+        .css({
+          fill: "#333333",
+        });
+
+      $("#map_1_")
+        .find(`g[id="${item.id.replace("id", "tag")}"] text`)
+        .css({
+          fill: "#b61e22",
+        });
+
+      $("#map_1_")
+        .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
+        .css({
+          fill: "#b61e22",
+        });
     }
 
     $("#map_1_")

code/src/components/showCollection/index.vue

@@ -38,9 +38,9 @@ export default {
 <style lang="scss" scoped>
 .wrapper {
   width: 100%;
-  height: 100%;
+  height: calc(100% - 80px);
   position: fixed;
-  top: 0;
+  bottom: 0;
   left: 0;
   z-index: 99999;
   .ui-broadcast {

code/src/components/showCollection/showCollection.vue

@@ -1,12 +1,20 @@
 <template>
   <div v-if="cItem.entity">
     <div class="img-body">
-      <img class="close" @click.stop="hideBroadcast" :src="require(`@/assets/images/icon/close.png`)" />
+      <img
+        class="close"
+        @click.stop="hideBroadcast"
+        :src="require(`@/assets/images/icon/close.png`)"
+      />
 
       <template v-if="cItem.entity.type == 'img'">
         <div class="swcon swiper-container" id="imglist">
           <ul class="swiper-wrapper">
-            <li class="swiper-slide" v-for="(sub, index) in cItem.file" :key="index">
+            <li
+              class="swiper-slide"
+              v-for="(sub, index) in cItem.file"
+              :key="index"
+            >
               <div class="sl-item">
                 <img :src="sub.filePath" />
                 <p>{{ cItem.entity.name }}</p>
@@ -15,84 +23,114 @@
           </ul>
         </div>
         <template v-if="cItem.file.length > 1">
-          <img class="vpagination left" :src="require('@/assets/images/icon/left.png')" @click="slide('slidePrev')"
-            alt="" />
-          <img class="vpagination right" :src="require('@/assets/images/icon/right.png')" @click="slide('slideNext')"
-            alt="" />
+          <img
+            class="vpagination left"
+            :src="require('@/assets/images/icon/left.png')"
+            @click="slide('slidePrev')"
+            alt=""
+          />
+          <img
+            class="vpagination right"
+            :src="require('@/assets/images/icon/right.png')"
+            @click="slide('slideNext')"
+            alt=""
+          />
         </template>
         <ul class="pagna" v-if="cItem.file.length > 1">
-          <li v-for="(sub, i) in cItem.file" :class="{ active: i == active }" :key="i"></li>
+          <li
+            v-for="(sub, i) in cItem.file"
+            :class="{ active: i == active }"
+            :key="i"
+          ></li>
         </ul>
       </template>
 
       <template v-else>
-        <iframe v-if="cItem.entity.type == 'model'" :src="`/model-page/model.html?m=${cItem.entity.filePath}`"
-          frameborder="0"></iframe>
-        <video ref="itemvideo" controlslist="nodownload noplaybackrate" :disablePictureInPicture="true"
-          v-else-if="cItem.entity.type == 'video'" controls :src="cItem.entity.filePath" loop autoplay></video>
-
-        <vAudio v-else  :adata="cItem.entity" ></vAudio>
-        <p v-if="cItem.entity.type != 'audio'" class="btmname">{{ cItem.entity.name }}</p>
+        <iframe
+          v-if="cItem.entity.type == 'model'"
+          :src="`/model-page/model.html?m=${cItem.entity.filePath}`"
+          frameborder="0"
+        ></iframe>
+        <video
+          ref="itemvideo"
+          controlslist="nodownload noplaybackrate"
+          :disablePictureInPicture="true"
+          v-else-if="cItem.entity.type == 'video'"
+          controls
+          :src="cItem.entity.filePath"
+          loop
+          autoplay
+        ></video>
+
+        <vAudio v-else :adata="cItem.entity"></vAudio>
+        <p v-if="cItem.entity.type != 'audio'" class="btmname">
+          {{ cItem.entity.name }}
+        </p>
       </template>
     </div>
   </div>
 </template>
 <script>
 import emitter from "@/mitt/index";
-import vAudio from '@/components/Audio'
+import vAudio from "@/components/Audio";
 
 export default {
+  name: "showCollection",
   props: ["item", "zhuti"],
   data() {
     return {
       isFull: false,
       active: 0,
-      swInstance: null
+      swInstance: null,
     };
   },
   components: { vAudio },
   computed: {
     cItem() {
-      return { ...this.item }
-    }
+      return { ...this.item };
+    },
   },
   watch: {
     isFull(newVal) {
       let tmp = this.cItem.type == "img";
       this.$emit("hideSlide", tmp && !newVal);
     },
+    // "swInstance.activeIndex"(val) {
+    //   this.active = val;
+    //   console.log("----------", val);
+    // },
   },
   methods: {
     slide(type) {
       this.swInstance[type]();
     },
     hideBroadcast() {
-      emitter.emit('closeCollection')
-    }
+      emitter.emit("closeCollection");
+    },
   },
   mounted() {
-    let that = this
+    let that = this;
     this.$nextTick(() => {
       let t = setTimeout(() => {
         clearTimeout(t);
         this.swInstance = new Swiper("#imglist", {
           slidesPerView: "auto",
+          normalizeSlideIndex: false,
           on: {
-            slideChangeTransitionEnd() {
+            slideChange() {
               that.active = this.realIndex;
+              if (this.realIndex > that.cItem.file.length - 1)
+                that.active = that.cItem.file.length - 1;
             },
           },
         });
-        console.log(this.swInstance);
-      },200);
-    })
+      }, 200);
+    });
   },
-
 };
 </script>
 
 <style lang="scss" scoped>
-
 .img-body {
   width: 100%;
   height: 100%;
@@ -154,7 +192,7 @@ export default {
           height: 95%;
           position: relative;
 
-          >img {
+          > img {
             width: auto;
             max-height: 90vh;
             max-width: 100%;
@@ -165,7 +203,7 @@ export default {
             transform: translate(-50%, -50%);
           }
 
-          >p {
+          > p {
             color: #fff;
             position: absolute;
             bottom: 30px;
@@ -186,7 +224,7 @@ export default {
     text-align: center;
     z-index: 999;
 
-    >li {
+    > li {
       width: 10px;
       border-radius: 50%;
       height: 10px;
@@ -268,179 +306,178 @@ export default {
 
 @media screen and (max-width: 1000px) {
   .img-body {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  color: #fff;
-
-  iframe,
-  audio,
-  video {
     width: 100%;
-    height: 80%;
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-    position: absolute;
-  }
+    height: 100%;
+    position: relative;
+    color: #fff;
 
-  audio {
-    width: 50%;
-    height: 20%;
-  }
+    iframe,
+    audio,
+    video {
+      width: 100%;
+      height: 80%;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 50%;
+      position: absolute;
+    }
 
-  .btmname {
-    transform: translateX(-50%);
-    bottom: 30px;
-    left: 50%;
-    position: absolute;
-    font-size: 24px;
-  }
+    audio {
+      width: 50%;
+      height: 20%;
+    }
 
-  .close {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-    z-index: 999999;
-  }
+    .btmname {
+      transform: translateX(-50%);
+      bottom: 30px;
+      left: 50%;
+      position: absolute;
+      font-size: 24px;
+    }
 
-  .swcon {
-    position: relative;
-    width: 100%;
-    height: 100%;
+    .close {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+      z-index: 999999;
+    }
 
-    .swiper-wrapper {
-      padding: 0;
+    .swcon {
+      position: relative;
       width: 100%;
+      height: 100%;
 
-      .swiper-slide {
+      .swiper-wrapper {
+        padding: 0;
         width: 100%;
-        transform-style: preserve-3d;
-        position: relative;
-        height: 100%;
-        margin: 0 auto;
-        transform: translate3d(0, 0, 0);
 
-        .sl-item {
+        .swiper-slide {
           width: 100%;
-          height: 95%;
+          transform-style: preserve-3d;
           position: relative;
-
-          >img {
-            width: auto;
-            max-height: 90vh;
-            max-width: 100%;
-            cursor: pointer;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-          }
-
-          >p {
-            color: #fff;
-            position: absolute;
-            bottom: 30px;
-            transform: translateX(-50%);
-            left: 50%;
-            font-size: 24px;
+          height: 100%;
+          margin: 0 auto;
+          transform: translate3d(0, 0, 0);
+
+          .sl-item {
+            width: 100%;
+            height: 95%;
+            position: relative;
+
+            > img {
+              width: auto;
+              max-height: 90vh;
+              max-width: 100%;
+              cursor: pointer;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+            }
+
+            > p {
+              color: #fff;
+              position: absolute;
+              bottom: 30px;
+              transform: translateX(-50%);
+              left: 50%;
+              font-size: 24px;
+            }
           }
         }
       }
     }
-  }
-
-  .pagna {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    z-index: 999;
-
-    >li {
-      width: 10px;
-      border-radius: 50%;
-      height: 10px;
-      background: rgba(51, 143, 123, 0.24);
-      display: inline-block;
-      margin: 0 4px;
 
-      &.active {
-        background: #338f7b;
+    .pagna {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      text-align: center;
+      z-index: 999;
+
+      > li {
+        width: 10px;
+        border-radius: 50%;
+        height: 10px;
+        background: rgba(51, 143, 123, 0.24);
+        display: inline-block;
+        margin: 0 4px;
+
+        &.active {
+          background: #338f7b;
+        }
       }
     }
-  }
 
-  .vpagination {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    width: 50px;
-    display: none;
-  }
+    .vpagination {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+      width: 50px;
+      display: none;
+    }
 
-  $pos: 180px;
+    $pos: 180px;
 
-  .left {
-    left: $pos;
-  }
+    .left {
+      left: $pos;
+    }
 
-  .right {
-    right: $pos;
+    .right {
+      right: $pos;
+    }
   }
-}
-
-.full {
-  width: 100%;
-  height: 100%;
-  z-index: 99999999;
-  position: relative;
 
-  iframe,
-  video {
+  .full {
     width: 100%;
     height: 100%;
-  }
+    z-index: 99999999;
+    position: relative;
 
-  .conname {
-    color: #fff;
-    margin-top: 6px;
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 40px;
-    font-size: 18px;
-  }
+    iframe,
+    video {
+      width: 100%;
+      height: 100%;
+    }
 
-  .img {
-    height: 100%;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
+    .conname {
+      color: #fff;
+      margin-top: 6px;
+      position: fixed;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 40px;
+      font-size: 18px;
+    }
 
-  .full-btn {
-    width: 30px;
-    position: absolute;
-    right: 12px;
-    bottom: 30px;
-    cursor: pointer;
-  }
+    .img {
+      height: 100%;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
 
-  .full-close {
-    width: 30px;
-    position: absolute;
-    right: 12px;
-    top: 30px;
-    cursor: pointer;
+    .full-btn {
+      width: 30px;
+      position: absolute;
+      right: 12px;
+      bottom: 30px;
+      cursor: pointer;
+    }
+
+    .full-close {
+      width: 30px;
+      position: absolute;
+      right: 12px;
+      top: 30px;
+      cursor: pointer;
+    }
   }
 }
-}
-
 </style>

code/src/views/exhibition/exhibition/collections.vue

@@ -20,7 +20,7 @@
           </template>
         </ui-select>
 
-        <ui-search v-model="searchKey" :placeholder="'请输入藏品名称'"></ui-search>
+        <ui-search v-model="searchKey" :placeholder="'请输入藏品名称1'"></ui-search>
       </div>
 
       <div class="sright">

code/src/views/home/maside.vue

@@ -70,7 +70,12 @@ const charStrs = ref('')
 
 const list = ref([]);
 
+const emit = defineEmits(["changeMap"]);
+
 const onClickSelect = (data) => {
+
+emit('changeMap',data.id)
+
   isShow.value = true
   currentId.value = data.id
 }

code/src/views/home/mobile.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="home">
     <div class="map">
-      <maps />
+      <maps ref="mapsRef"/>
     </div>
-    <vaside class="vaside" />
+    <vaside class="vaside" @changeMap='changeMap'/>
   </div>
 </template>
 
@@ -16,6 +16,18 @@ import { ref, defineEmits, onMounted, watch, nextTick } from "vue";
 import { Loading } from "@/components/UI";
 import { useRouter, useRoute } from "vue-router";
 
+
+// 得到子组件的切换列表信息
+
+const mapsRef =ref(null);
+const changeMap =(id)=>{
+  // 把id传给子组件地图
+  console.log(mapsRef.value);
+  mapsRef.value.changeMap(id)
+  // console.log('------------',id);
+}
+
+
 const router = useRouter();
 
 const currentCity = ref('')