修改首页质检中心列表跳转定位

src/views/Business/Guide1.vue

@@ -163,6 +163,7 @@ export default {
       handler(val) {
         this.$nextTick(() => {
           Object.keys(this.$refs).forEach((key) => {
+            console.log(this.$refs[key], "this.$refs");
             this.$refs[key].setAttribute("class", "msg-title");
           });
           const top = this.$refs[val.query.id].offsetTop;

src/views/Home/comps/other-list.vue

@@ -3,20 +3,24 @@
     <div v-for="(tmp, i) in list" :key="i" class="row" @click="handelMsg(tmp)">
       <div class="col li">
         <span></span>
-        <span :title="tmp.name">{{tmp.name}}</span>
+        <span :title="tmp.name">{{ tmp.name }}</span>
       </div>
     </div>
   </div>
 </template>
 <script>
 export default {
-  props: ['list'],
+  props: ["list"],
   methods: {
     handelMsg(obj) {
-      window.open(obj.url, '_blank');
+      let routeData = this.$router.resolve({
+        path: obj.url,
+        query: obj.query,
+      });
+      window.open(routeData.href, "_blank");
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
 .list {
@@ -33,7 +37,7 @@ export default {
       display: flex;
       align-items: center;
       font-size: 14px;
-      color: #7E8EA9;
+      color: #7e8ea9;
       @include ellipsis;
       span {
         display: inline-block;

src/views/Home/index.vue

@@ -923,54 +923,93 @@ export default {
           {
             name: "国家射频识别产品质量检验检测中心",
             url: '/Org/Sites',
+            query: {
+              id: '1-1'
+            }
           },
           {
             name: "国家条码质量检验检测中心",
             url: '/Org/Sites',
+            query: {
+              id: '1-2'
+            }
           },
           {
             name: "中国自动识别技术协会",
             url: '/Org/Sites',
+            query: {
+              id: '1-3'
+            }
           },
           {
             name: "中国条码技术与应用协会",
             url: '/Org/Sites',
+            query: {
+              id: '1-4'
+            }
           },
           {
             name: "《中国自动识别技术》杂志社电子版",
             url: '/Org/Sites',
+            query: {
+              id: '1-5'
+            }
           },
           {
             name: "中国ECR委员会",
             url: '/Org/Sites',
+            query: {
+              id: '1-6'
+            }
           },
           {
             name: "全国物品编码标准化技术委员会",
             url: '/Org/Sites',
+            query: {
+              id: '1-7'
+            }
           },
           {
             name: "全国物流信息管理标准化技术委员会",
             url: '/Org/Sites',
+            query: {
+              id: '1-8'
+            }
           },
           {
             name: "全国自动识别与数据采集分委员会",
             url: '/Org/Sites',
+            query: {
+              id: '1-9'
+            }
           },
           {
             name: "物联网标识工作组",
             url: '/Org/Sites',
+            query: {
+              id: '1-10'
+            }
           },
           {
             name: "全球产品电子代码中国管理中心",
             url: '/Org/Sites',
+            query: {
+              id: '1-11'
+            }
           },
           {
             name: "中国UNSPSC动态维护管理中心",
             url: '/Org/Sites',
+            query: {
+              id: '1-12'
+            }
           },
           {
             name: "北京东方捷码科技开发中心",
             url: '/Org/Sites',
+            query: {
+              id: '1-13'
+            }
           },
         ],
       },

src/views/Org/Sites.vue

@@ -3,7 +3,7 @@
     <div class="guide-msg container">
       <div class="msg-cont">
         <div class="nsjg">
-          <Title :father="site.title1"></Title>
+          <Title :father="site.title1" ref="1-1"></Title>
           <p>
             依托于中国物品编码中心的国家条码质量检验检测中心，是原国家质量监督检验检疫总局授权的国家级产品质量监督检验中心（国认监认字225号）。质检中心筹建于1991年，并于1997年首次通过评审。2003年通过了中国实验室国家认可委员会认可（CNAL
             No.
@@ -15,7 +15,7 @@
           </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title2"></Title>
+          <Title :father="site.title2" ref="1-2"></Title>
           <p>
             国家射频识别产品质量检验检测中心是国家级的专业射频识别相关产品检验机构，是我国射频识别领域的权威检测机构，是目前亚太地区唯一获得ARTC（Approved
             RFID Test
@@ -29,7 +29,7 @@
           </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title3"></Title>
+          <Title :father="site.title3" ref="1-3"></Title>
           <p>
             中国自动识别技术协会（<a
               href=" http://www.aimchina.org.cn"
@@ -48,7 +48,7 @@
           </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title4"></Title>
+          <Title :father="site.title4" ref="1-4"></Title>
           <p>
             <a href="http://www.cabc.net.cn/" target="_blank"
               >中国条码技术与应用协会</a
@@ -65,7 +65,7 @@
           </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title5"></Title>
+          <Title :father="site.title5" ref="1-5"></Title>
           <p>
             2001年，中国物品编码中心发起成立了中国ECR委员会（<a
               href="http://www.ecrchina.org/"
@@ -80,37 +80,73 @@
           </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title6"></Title>
-          <p>全国物品编码标准化技术委员会成立于2006年，其主要范围是负责商品、产品、服务、资产、物资等物品的分类编码、标识编码和属性编 码，物品品种编码，单件物品编码的国家标准制修订工作；全国物品编码的管理与服务及物品编码相关载体技术等方面的国家标准制修订工作。秘书处设在中国物品编码中心，受国家标准化管理委员会直接领导。</p>
+          <Title :father="site.title6" ref="1-6"></Title>
+          <p>
+            全国物品编码标准化技术委员会成立于2006年，其主要范围是负责商品、产品、服务、资产、物资等物品的分类编码、标识编码和属性编
+            码，物品品种编码，单件物品编码的国家标准制修订工作；全国物品编码的管理与服务及物品编码相关载体技术等方面的国家标准制修订工作。秘书处设在中国物品编码中心，受国家标准化管理委员会直接领导。
+          </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title7"></Title>
-          <p>全国物流信息管理标准化技术委员会（China Logistics Information Standardization Committee, 简称CLISC）主要负责物流信息基础、物流信息系统、物流信息安全、物流信息管理、物流信息应用等领域的标准化工作。其宗旨是：向国内企业引进世界最新的现代物流管理运作理念，推广现代物流管理新技术与成功的物流管理经验；协调、制定并推广相应的标准。秘书处设在中国物品编码中心，受国家标准化管理委员会的直接领导。</p>
+          <Title :father="site.title7" ref="1-7"></Title>
+          <p>
+            全国物流信息管理标准化技术委员会（China Logistics Information
+            Standardization Committee,
+            简称CLISC）主要负责物流信息基础、物流信息系统、物流信息安全、物流信息管理、物流信息应用等领域的标准化工作。其宗旨是：向国内企业引进世界最新的现代物流管理运作理念，推广现代物流管理新技术与成功的物流管理经验；协调、制定并推广相应的标准。秘书处设在中国物品编码中心，受国家标准化管理委员会的直接领导。
+          </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title8"></Title>
-          <p>全国信息技术标准化技术委员会自动识别与数据采集技术分技术委员会（ISO/IEC JTC1/SC31）是自动识别和数据采集技术及应用的标准化组织。主要职责是：为国家建立自动识别与数据采集技术标准化体系提供技术支持；负责自动识别与数据采集技术和应用领域相关国家标准组织制定、技术审查；为自动识别与数据采集技术在各领域中的应用提供技术支持；向国际标准组织提出本专业国际标准；对口国际ISO/IEC JTC1/SC31工作；协调与其它相关分技术委员会的关系。秘书处设在中国物品编码中心。</p>
+          <Title :father="site.title8" ref="1-8"></Title>
+          <p>
+            全国信息技术标准化技术委员会自动识别与数据采集技术分技术委员会（ISO/IEC
+            JTC1/SC31）是自动识别和数据采集技术及应用的标准化组织。主要职责是：为国家建立自动识别与数据采集技术标准化体系提供技术支持；负责自动识别与数据采集技术和应用领域相关国家标准组织制定、技术审查；为自动识别与数据采集技术在各领域中的应用提供技术支持；向国际标准组织提出本专业国际标准；对口国际ISO/IEC
+            JTC1/SC31工作；协调与其它相关分技术委员会的关系。秘书处设在中国物品编码中心。
+          </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title9"></Title>
-          <p>物联网编码标识技术作为是物联网最为基础的关键技术，编码标识技术体系由编码（代码）、数据载体、数据协议、信息系统、网络解析、发现服务、应用等共同构成的完整技术体系。物联网中的编码标识已成为当前的焦点和热点问题，各个国家和国际组织都在尝试提出一种适合于物联网应用的编码。“国家物联网编码标识项目组”将重点致力于我国物联网编码标识的基础技术标准制订、物联网在各个行业领域的编码标识体系制订，以及推广应用等工作…</p>
+          <Title :father="site.title9" ref="1-9"></Title>
+          <p>
+            物联网编码标识技术作为是物联网最为基础的关键技术，编码标识技术体系由编码（代码）、数据载体、数据协议、信息系统、网络解析、发现服务、应用等共同构成的完整技术体系。物联网中的编码标识已成为当前的焦点和热点问题，各个国家和国际组织都在尝试提出一种适合于物联网应用的编码。“国家物联网编码标识项目组”将重点致力于我国物联网编码标识的基础技术标准制订、物联网在各个行业领域的编码标识体系制订，以及推广应用等工作…
+          </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title10"></Title>
-          <p>中国自动识别技术杂志社是由国家质检总局主管，中国物品编码中心和中国自动识别技术协会联合主办的出版机构。按照国家新闻出版总署关于中央新闻出版业文化体制改革精神的要求，经国家质检总局同意，2013年3月，中国物品编码中心主办的《条码与信息系统》编辑部与中国自动识别技术协会主办的《中国自动识别技术》杂志社进行了改革重组，重组后的《中国自动识别技术》杂志社2013年3月15日正式运营，统筹开展两份期刊的出版发行工作…</p>
+          <Title :father="site.title10" ref="1-10"></Title>
+          <p>
+            中国自动识别技术杂志社是由国家质检总局主管，中国物品编码中心和中国自动识别技术协会联合主办的出版机构。按照国家新闻出版总署关于中央新闻出版业文化体制改革精神的要求，经国家质检总局同意，2013年3月，中国物品编码中心主办的《条码与信息系统》编辑部与中国自动识别技术协会主办的《中国自动识别技术》杂志社进行了改革重组，重组后的《中国自动识别技术》杂志社2013年3月15日正式运营，统筹开展两份期刊的出版发行工作…
+          </p>
         </div>
         <div class="nsjg">
           <Title :father="site.title11"></Title>
-          <p>全球产品电子代码中国管理中心（EPCglobal China）作为EPCglobal在中国大陆地区的唯一组织成员，负责中国范围内产品电子代码的注册、管理和标准化工作，推广EPC系统，提供技术支持和培训产品电子代码系统用户。EPCglobal China由中国物品编码中心负责组织和管理。</p>
+          <p>
+            全球产品电子代码中国管理中心（EPCglobal
+            China）作为EPCglobal在中国大陆地区的唯一组织成员，负责中国范围内产品电子代码的注册、管理和标准化工作，推广EPC系统，提供技术支持和培训产品电子代码系统用户。EPCglobal
+            China由中国物品编码中心负责组织和管理。
+          </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title12"></Title>
-          <p>中国UNSPSC动态维护管理中心（UNSPSC China）是由联合国开发计划署委托开发的全球产品与服务分类体系，主要适用于电子商务和政府间采购，并由美国统一代码委员会（UCC）全权实时维护和管理。2004年，UCC正式授权中国物品编码中心独家负责UNSPSC中文版本的全部工作。中国UNSPSC动态维护管理中心成立，负责UNSPSC的本地化工作。</p>
+          <Title :father="site.title12" ref="1-12"></Title>
+          <p>
+            中国UNSPSC动态维护管理中心（UNSPSC
+            China）是由联合国开发计划署委托开发的全球产品与服务分类体系，主要适用于电子商务和政府间采购，并由美国统一代码委员会（UCC）全权实时维护和管理。2004年，UCC正式授权中国物品编码中心独家负责UNSPSC中文版本的全部工作。中国UNSPSC动态维护管理中心成立，负责UNSPSC的本地化工作。
+          </p>
         </div>
         <div class="nsjg">
-          <Title :father="site.title13"></Title>
-          <p>中国物品编码中心技术服务公司隶属于中国物品编码中心，成立于1992年。北京东方捷码科技开发中心（<a href="http://www.anccweb.com/" target="_blank" style="color: red">http://www.anccweb.com/</a>）成立于2000年，是中国物品编码中心技术服务公司的子公司。公司成立以后，研发和技术人员参与编制和审查自动识别技术与信息标准化相关的国家标准、行业标准、武警标准；承担国家科研项目和科研课题，将科研成果转化为应用产品；开发条码技术和射频技术的管理系统应用在国家管理部门、军队、武警、工业生产、物流仓储、农业养殖、商业、印刷业等领域。</p>
-          <p>北京东方捷码科技开发中心（<a href="http://www.anccweb.com/" target="_blank" style="color: red">http://www.anccweb.com/</a>）产品开发大部分涉及条码技术和RFID等自动识别技术，公司的研发和技术人员对条码等相关技术进行深入探究和追求，研发人员在条码技术和自动信息处理技术方面有较深的造诣。是国内专业开发和生产条码检测设备的企业，建立了拥有专利技术和自主知识产权的条码检测仪器的研发和生产基地，台式和便携式条码检测仪系列产品打破了国外技术的垄断，替代进口产品；C42A台式条码检测仪成为我国条码质检中心（国家级检测机构）和全部省级条码检测机构的基础检测仪器，便携式条码检测仪也已经应用到国家和地方的条码检测机构，大专院校，各类生产、物流、印刷、商业企业。</p>
+          <Title :father="site.title13" ref="1-13"></Title>
+          <p>
+            中国物品编码中心技术服务公司隶属于中国物品编码中心，成立于1992年。北京东方捷码科技开发中心（<a
+              href="http://www.anccweb.com/"
+              target="_blank"
+              style="color: red"
+              >http://www.anccweb.com/</a
+            >）成立于2000年，是中国物品编码中心技术服务公司的子公司。公司成立以后，研发和技术人员参与编制和审查自动识别技术与信息标准化相关的国家标准、行业标准、武警标准；承担国家科研项目和科研课题，将科研成果转化为应用产品；开发条码技术和射频技术的管理系统应用在国家管理部门、军队、武警、工业生产、物流仓储、农业养殖、商业、印刷业等领域。
+          </p>
+          <p>
+            北京东方捷码科技开发中心（<a
+              href="http://www.anccweb.com/"
+              target="_blank"
+              style="color: red"
+              >http://www.anccweb.com/</a
+            >）产品开发大部分涉及条码技术和RFID等自动识别技术，公司的研发和技术人员对条码等相关技术进行深入探究和追求，研发人员在条码技术和自动信息处理技术方面有较深的造诣。是国内专业开发和生产条码检测设备的企业，建立了拥有专利技术和自主知识产权的条码检测仪器的研发和生产基地，台式和便携式条码检测仪系列产品打破了国外技术的垄断，替代进口产品；C42A台式条码检测仪成为我国条码质检中心（国家级检测机构）和全部省级条码检测机构的基础检测仪器，便携式条码检测仪也已经应用到国家和地方的条码检测机构，大专院校，各类生产、物流、印刷、商业企业。
+          </p>
         </div>
       </div>
     </div>
@@ -168,6 +204,26 @@ export default {
       },
     };
   },
+  watch: {
+    $route: {
+      handler(val) {
+        this.$nextTick(() => {
+          Object.keys(this.$refs).forEach((key) => {
+            this.$refs[key].$el.setAttribute("class", "zxcxgj-title");
+          });
+          if (val.query.id) {
+            const top = this.$refs[val.query.id].$el.offsetTop;
+            window.scrollTo(0, top);
+            this.$refs[val.query.id].$el.setAttribute(
+              "class",
+              "zxcxgj-title actived"
+            );
+          }
+        });
+      },
+      immediate: true,
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/views/comps/title.vue

 <template>
-  <div class="zxcxgj-title">
-    <span></span>{{ father.name }}
-  </div>
+  <div class="zxcxgj-title"><span></span>{{ father.name }}</div>
 </template>
 <script>
 export default {
@@ -11,7 +9,7 @@ export default {
 <style lang="scss">
 .zxcxgj-title {
   font-size: 16px;
-  color: #04408d;
+  color: #008dbd;
   border-bottom: 1px solid #c5d8ee;
   padding: 14px 0;
   display: flex;
@@ -25,5 +23,8 @@ export default {
     border-radius: 50%;
     margin-right: 10px;
   }
+  &.actived {
+    color: #04408d;
+  }
 }
 </style>
\ No newline at end of file