Skip to content

E
exhibition_page
提交 9f7935b0 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

删除冗余代码

上级 041fddb7
显示空白字符变更
内嵌 并排
正在显示 包含 115 行增加 和 1196 行删除
src/router/index.js
浏览文件 @ 9f7935b0
...@@ -187,13 +187,6 @@ const routes = [ ...@@ -187,13 +187,6 @@ const routes = [
name: "3d", name: "3d",
component: () => component: () =>
import("@/views/3d/index.vue"), import("@/views/3d/index.vue"),
},
// 3d展示页面，仅供测试用
{
path: "/caj",
name: "caj",
component: () =>
import("@/views/caj/index.vue"),
}, },
// 404 // 404
{ {
......
src/views/boutique/data.js → src/views/boutique/components/smgz/data.js
浏览文件 @ 9f7935b0
export var crPics = [ export const crPics = [
[ [
{ {
"name": "邓氏贵州鱼龙（模式标本）", "name": "邓氏贵州鱼龙（模式标本）",
"crId": "fe79d56cd28142e9a6404277c7fbef67", "crId": "fe79d56cd28142e9a6404277c7fbef67",
"index":"2", "index": "2",
"intro": "邓氏贵州鱼龙属于鱼龙目，萨斯特鱼龙科，贵州鱼龙属，产于贵州关岭岗乌乡白岩，晚三叠世法朗组瓦窑组。邓氏贵州鱼龙已列入“国家重点保护古生物化石名录（第一批）”，也是关岭生物群的重要成员之一。", "intro": "邓氏贵州鱼龙属于鱼龙目，萨斯特鱼龙科，贵州鱼龙属，产于贵州关岭岗乌乡白岩，晚三叠世法朗组瓦窑组。邓氏贵州鱼龙已列入“国家重点保护古生物化石名录（第一批）”，也是关岭生物群的重要成员之一。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/2邓氏贵州鱼龙/low/2邓氏贵州鱼龙.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/2邓氏贵州鱼龙/low/2邓氏贵州鱼龙.png"
}, },
{ {
"name": "梁氏关岭鱼龙（怀孕）", "name": "梁氏关岭鱼龙（怀孕）",
"crId": "aaf921134d9a4abbbe6c300ad7cf0fcd", "crId": "aaf921134d9a4abbbe6c300ad7cf0fcd",
"index":"1", "index": "1",
"intro": "该标本左侧视保存，右前肢骨骼保存较为散乱，左后肢部分骨骼缺失。标本两侧肋骨之间保存有三条胚胎个体，胚胎的脊椎部分出露。胚胎可见长度90～110cm。", "intro": "该标本左侧视保存，右前肢骨骼保存较为散乱，左后肢部分骨骼缺失。标本两侧肋骨之间保存有三条胚胎个体，胚胎的脊椎部分出露。胚胎可见长度90～110cm。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/22梁氏关岭鱼龙（怀孕）/low/22梁氏关岭鱼龙-怀孕.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/22梁氏关岭鱼龙（怀孕）/low/22梁氏关岭鱼龙-怀孕.png"
}, },
...@@ -18,7 +18,7 @@ export var crPics = [ ...@@ -18,7 +18,7 @@ export var crPics = [
{ {
"name": "美丽瓦窑龙（模式标本）", "name": "美丽瓦窑龙（模式标本）",
"crId": "26a5c7cd499a4d22a6f43e7d881dcaae", "crId": "26a5c7cd499a4d22a6f43e7d881dcaae",
"index":"3", "index": "3",
"intro": "该标本是美丽瓦窑龙的正模标本，也就是美丽瓦窑龙这个新属种命名依据的标本。美丽瓦窑龙属于肿肋龙类瓦窑龙属，产出于贵州关岭新铺乡小凹，上三叠统瓦窑组，是关岭生物群的重要成员。", "intro": "该标本是美丽瓦窑龙的正模标本，也就是美丽瓦窑龙这个新属种命名依据的标本。美丽瓦窑龙属于肿肋龙类瓦窑龙属，产出于贵州关岭新铺乡小凹，上三叠统瓦窑组，是关岭生物群的重要成员。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/3美丽瓦窑龙/low/3美丽瓦窑龙.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/3美丽瓦窑龙/low/3美丽瓦窑龙.png"
}, },
...@@ -27,21 +27,21 @@ export var crPics = [ ...@@ -27,21 +27,21 @@ export var crPics = [
{ {
"name": "许氏创孔海百合", "name": "许氏创孔海百合",
"crId": "39ea6e3fb71c434aa07cf25c98b96ace", "crId": "39ea6e3fb71c434aa07cf25c98b96ace",
"index":"1", "index": "1",
"intro": "许氏创孔海百合属于超大型密集共生的国家一级重点保护古生物化石，主要产自关岭等地的法郎组瓦窑段，距今约两亿三千万年。是一种古老的无脊椎棘皮动物。", "intro": "许氏创孔海百合属于超大型密集共生的国家一级重点保护古生物化石，主要产自关岭等地的法郎组瓦窑段，距今约两亿三千万年。是一种古老的无脊椎棘皮动物。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/10许氏创孔海百合/low/10许氏创孔海百合.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/10许氏创孔海百合/low/10许氏创孔海百合.png"
}, },
{ {
"name": "黄果树安顺龙", "name": "黄果树安顺龙",
"crId": "7b822103b1a3493a95004bca11d526a4", "crId": "7b822103b1a3493a95004bca11d526a4",
"index":"2", "index": "2",
"intro": "黄果树安顺龙是“国家重点保护古生物化石名录”中的一级化石，这条黄果树安顺龙龙长3.72m，呈腹视保存，整体骨骼出露清晰，表面覆盖极薄的围岩，尾末端有缺失，左前肢指骨有移位，腹膜肋呈松散保存。", "intro": "黄果树安顺龙是“国家重点保护古生物化石名录”中的一级化石，这条黄果树安顺龙龙长3.72m，呈腹视保存，整体骨骼出露清晰，表面覆盖极薄的围岩，尾末端有缺失，左前肢指骨有移位，腹膜肋呈松散保存。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/26黄果树安顺龙/low/26黄果树安顺龙.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/26黄果树安顺龙/low/26黄果树安顺龙.png"
}, },
{ {
"name": "杨氏幻龙", "name": "杨氏幻龙",
"crId": "5d8d468a0a7e40cb9c53089c658f6778", "crId": "5d8d468a0a7e40cb9c53089c658f6778",
"index":"3", "index": "3",
"intro": "蜥形纲，鳞龙形下纲，鳍龙超目，始鳍龙目，幻龙科，幻龙属。标本为产出于贵州省兴义的中三叠统法郎组竹竿坡段地层中的幻龙类幼体。腹视保存，整体保存较好，仅尾后部脱位保存。", "intro": "蜥形纲，鳞龙形下纲，鳍龙超目，始鳍龙目，幻龙科，幻龙属。标本为产出于贵州省兴义的中三叠统法郎组竹竿坡段地层中的幻龙类幼体。腹视保存，整体保存较好，仅尾后部脱位保存。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/16杨氏幻龙/low/16杨氏幻龙.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/16杨氏幻龙/low/16杨氏幻龙.png"
}, },
...@@ -52,21 +52,21 @@ export var crPics = [ ...@@ -52,21 +52,21 @@ export var crPics = [
{ {
"name": "兴义欧龙", "name": "兴义欧龙",
"crId": "c6c0b8beda804b1097914c8db014c921", "crId": "c6c0b8beda804b1097914c8db014c921",
"index":"1", "index": "1",
"intro": "兴义欧龙为产出于贵州省兴义的中三叠统法郎组竹竿坡段地层中的海生爬行动物。该化石腹视保存，整体骨骼保存良好，仅腹膜肋部分散乱保存。", "intro": "兴义欧龙为产出于贵州省兴义的中三叠统法郎组竹竿坡段地层中的海生爬行动物。该化石腹视保存，整体骨骼保存良好，仅腹膜肋部分散乱保存。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/15兴义欧龙/low/15兴义欧龙.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/15兴义欧龙/low/15兴义欧龙.png"
}, },
{ {
"name": "盘县混鱼龙", "name": "盘县混鱼龙",
"crId": "ad54eec4c4b54f9ea3cb5d406b1f2a88", "crId": "ad54eec4c4b54f9ea3cb5d406b1f2a88",
"index":"2", "index": "2",
"intro": "盘县混鱼龙已列入“国家重点保护古生物化石名录（第一批）”，是三叠纪海生爬行动物的重要分子，它属于鱼龙类混鱼龙属，混鱼龙是迄今发现的较小的鱼龙类动物之一。", "intro": "盘县混鱼龙已列入“国家重点保护古生物化石名录（第一批）”，是三叠纪海生爬行动物的重要分子，它属于鱼龙类混鱼龙属，混鱼龙是迄今发现的较小的鱼龙类动物之一。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/33盘县混鱼龙/low/33盘县混鱼龙.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/33盘县混鱼龙/low/33盘县混鱼龙.png"
}, },
{ {
"name": "东方恐头龙", "name": "东方恐头龙",
"crId": "7973c7ad71d549d2a2a7d61ac534a5f5", "crId": "7973c7ad71d549d2a2a7d61ac534a5f5",
"index":"3", "index": "3",
"intro": "东方恐头龙为产出于贵州省盘州的中三叠统关岭组地层中的海生爬行动物。恐头龙是首个发现于中国的三叠纪中期的原龙类动物。该标本头部背视保存，颈部左侧视保存，其余部分近右侧视保存。体躯、四肢及尾前部骨骼部分脱位保存。", "intro": "东方恐头龙为产出于贵州省盘州的中三叠统关岭组地层中的海生爬行动物。恐头龙是首个发现于中国的三叠纪中期的原龙类动物。该标本头部背视保存，颈部左侧视保存，其余部分近右侧视保存。体躯、四肢及尾前部骨骼部分脱位保存。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/25东方恐头龙/low/25东方恐头龙.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/25东方恐头龙/low/25东方恐头龙.png"
}, },
...@@ -75,20 +75,20 @@ export var crPics = [ ...@@ -75,20 +75,20 @@ export var crPics = [
{ {
"name": "孙氏新铺龙（模式标本 正型）", "name": "孙氏新铺龙（模式标本 正型）",
"crId": "28e7b26a80fb4f1dbb8a0ca37ea46849", "crId": "28e7b26a80fb4f1dbb8a0ca37ea46849",
"index":"1", "index": "1",
"intro": "该标本是孙氏新铺龙的正模式标本，也就是孙氏新铺龙命名时所依据的标本。是一具主轴骨彼此关联完整骨架之左侧视。", "intro": "该标本是孙氏新铺龙的正模式标本，也就是孙氏新铺龙命名时所依据的标本。是一具主轴骨彼此关联完整骨架之左侧视。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/5孙氏新铺龙/low/5孙氏新铺龙.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/5孙氏新铺龙/low/5孙氏新铺龙.png"
}, },
{ {
"name": "乌沙安顺龙", "name": "乌沙安顺龙",
"index":"2", "index": "2",
"crId": "388950e11fb14d369eb97e8de4ddcd7b", "crId": "388950e11fb14d369eb97e8de4ddcd7b",
"intro": "标本头部左腹视保存，头后部分右侧视保存，右前肢部分骨骼移位重叠，左后肢向背侧翻转。乌沙安顺龙是产出于贵州省兴义中三叠统法郎组竹竿坡段地层的中型海生爬行动物，属于海龙类，是安顺龙的第二个种。", "intro": "标本头部左腹视保存，头后部分右侧视保存，右前肢部分骨骼移位重叠，左后肢向背侧翻转。乌沙安顺龙是产出于贵州省兴义中三叠统法郎组竹竿坡段地层的中型海生爬行动物，属于海龙类，是安顺龙的第二个种。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/17乌沙安顺龙/low/17乌沙安顺龙.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/17乌沙安顺龙/low/17乌沙安顺龙.png"
}, },
{ {
"name": "羊圈幻龙", "name": "羊圈幻龙",
"index":"3", "index": "3",
"crId": "d16048bb74254beb834655250217f2fe", "crId": "d16048bb74254beb834655250217f2fe",
"intro": "羊圈幻龙已列入“国家重点保护古生物化石名录（第一批）”，是三叠纪海生爬行动物的重要分子，属于鳍龙目，幻龙科，幻龙属，产于盘县、普安中三叠世关岭组。", "intro": "羊圈幻龙已列入“国家重点保护古生物化石名录（第一批）”，是三叠纪海生爬行动物的重要分子，属于鳍龙目，幻龙科，幻龙属，产于盘县、普安中三叠世关岭组。",
"url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/14羊圈幻龙/low/14羊圈幻龙.png" "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/14羊圈幻龙/low/14羊圈幻龙.png"
......
src/views/boutique/components/SMGZ.vue → src/views/boutique/components/smgz/index.vue
浏览文件 @ 9f7935b0
...@@ -5,50 +5,44 @@ ...@@ -5,50 +5,44 @@
<img src="@/assets/imgs/boutique/smgz-5/1_faceImage/bg.png" alt="" /> <img src="@/assets/imgs/boutique/smgz-5/1_faceImage/bg.png" alt="" />
</div> </div>
<div class="left-title img wow animate__animated animate__fadeInLeft"> <div class="left-title img wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/boutique/smgz/1_faceImage/left-title.png" alt="" />
</div>
<!-- <div
class="center-title img wow animate__animated animate__fadeInDown"
data-wow-duration="3s"
>
<img <img
src="@/assets/imgs/boutique/smgz/1_faceImage/center-title.png" src="@/assets/imgs/boutique/smgz/1_faceImage/left-title.png"
alt="" alt=""
/> />
</div> --> </div>
<div class="ms img wow animate__animated animate__fadeInRight" data-wow-duration="2s"> <div
class="ms img wow animate__animated animate__fadeInRight"
data-wow-duration="2s"
>
<img src="@/assets/imgs/boutique/smgz/1_faceImage/ms-low.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/1_faceImage/ms-low.png" alt="" />
</div> </div>
<div class="more img wow animate__animated animate__fadeInUp" data-wow-duration="1s" @click="handleClickMore"> <div
class="more img wow animate__animated animate__fadeInUp"
data-wow-duration="1s"
@click="handleClickMore"
>
<img src="@/assets/imgs/boutique/smgz/1_faceImage/more.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/1_faceImage/more.png" alt="" />
</div> </div>
</div> </div>
<div class="intro smgz-item" id="intro"> <div class="intro smgz-item" id="intro">
<!-- <div class="bg img wow animate__animated animate__fadeIn"> <div
<img src="@/assets/imgs/boutique/smgz/2_intro/bg.png" alt="" /> class="cover img wow animate__animated animate__fadeInUp"
</div> --> data-wow-duration="1s"
<div class="cover img wow animate__animated animate__fadeInUp" data-wow-duration="1s"> >
<img src="@/assets/imgs/boutique/smgz-5/2_intro/cover.png" alt="" /> <img src="@/assets/imgs/boutique/smgz-5/2_intro/cover.png" alt="" />
</div> </div>
<div class="cover2 img wow animate__animated animate__fadeInUp" data-wow-duration="2s"> <div
class="cover2 img wow animate__animated animate__fadeInUp"
data-wow-duration="2s"
>
<img src="@/assets/imgs/boutique/smgz-10/2_intro/cover2.png" alt="" /> <img src="@/assets/imgs/boutique/smgz-10/2_intro/cover2.png" alt="" />
<div class="title img wow animate__animated animate__fadeInUp" data-wow-duration="4s"> <div
class="title img wow animate__animated animate__fadeInUp"
data-wow-duration="4s"
>
<img src="@/assets/imgs/boutique/smgz/2_intro/title.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/2_intro/title.png" alt="" />
</div> </div>
</div> </div>
<!-- <div class="text img wow animate__animated animate__fadeInUp">
<div class="text-content">
<div class="title">展览简介</div>
<div class="main">
<p>
贵州在国际学术界享有“古生物王国”的美誉，境内瓮安生物群、凯里生物群、青岩生物群、关岭动物群等11个古生物群的发现，在全球具有石破天惊的影响。
</p>
<p>
展览立足独有而丰富的古生物标本以及丰厚的科研成果，用博物馆展览语言全面阐释“神秘贵州”古生物化石承载的地史信息，传播地学知识，增强文化自信，助推生态文明建设，促进人类和谐发展。
</p>
</div>
</div>
</div> -->
<div class="text wow animate__animated animate__fadeInUp"> <div class="text wow animate__animated animate__fadeInUp">
<div class="title">展览简介</div> <div class="title">展览简介</div>
<div class="main"> <div class="main">
...@@ -63,16 +57,24 @@ ...@@ -63,16 +57,24 @@
</div> </div>
<div class="hall smgz-item"> <div class="hall smgz-item">
<div class="hall-content wow animate__animated animate__fadeIn"> <div class="hall-content wow animate__animated animate__fadeIn">
<div class="hall-content-title wow animate__animated animate__fadeInDown"> <div
<!-- <img src="@/assets/imgs/boutique/smgz/3_hall/title.png" alt="" /> --> class="hall-content-title wow animate__animated animate__fadeInDown"
>
— 展览单元 — — 展览单元 —
</div> </div>
<div class="hall-content-intro"> <div class="hall-content-intro">
<div class="hall-content-buttons wow animate__animated animate__fadeInUp"> <div
<div :class="[ class="hall-content-buttons wow animate__animated animate__fadeInUp"
>
<div
:class="[
'button-item', 'button-item',
currentUnitPicIndex == index ? 'active' : '', currentUnitPicIndex == index ? 'active' : '',
]" v-for="(item, index) in units" :key="index" @click="handleChangeUnit(index)"> ]"
v-for="(item, index) in units"
:key="index"
@click="handleChangeUnit(index)"
>
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
...@@ -81,12 +83,18 @@ ...@@ -81,12 +83,18 @@
</div> </div>
</div> </div>
<div class="hall-content-swiper wow animate__animated animate__fadeInUp"> <div
class="hall-content-swiper wow animate__animated animate__fadeInUp"
>
<swiper :options="swiperOption" ref="unitSwiper"> <swiper :options="swiperOption" ref="unitSwiper">
<swiper-slide v-for="(item, index) in units" :key="index"> <swiper-slide v-for="(item, index) in units" :key="index">
<div class="img-container" v-if="item.img"> <div class="img-container" v-if="item.img">
<!-- <img :src="$getFullUrl(baseUrl + item.img)" /> --> <ImageViewer
<ImageViewer :src="$getFullUrl(baseUrl + item.img)" :highImgSrc="$getFullUrl(baseUrl + item.hightImg)" width="100%" height="100%" /> :src="$getFullUrl(baseUrl + item.img)"
:highImgSrc="$getFullUrl(baseUrl + item.hightImg)"
width="100%"
height="100%"
/>
</div> </div>
</swiper-slide> </swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
...@@ -103,30 +111,21 @@ ...@@ -103,30 +111,21 @@
<div class="crs smgz-item"> <div class="crs smgz-item">
<div class="crs-content"> <div class="crs-content">
<div class="crs-content-title wow animate__animated animate__fadeInDown">
— 展览精品 —
<!-- <img src="@/assets/imgs/boutique/smgz/4_cr/title.png" alt="" /> -->
</div>
<!-- <div
class="crs-content-buttons wow animate__animated animate__fadeInUp"
>
<div <div
:class="[ class="crs-content-title wow animate__animated animate__fadeInDown"
'button-item',
curentUnitCrIndex == item.index ? 'active' : '',
]"
v-for="(item, index) in units"
:key="index"
@click="handleChangeCr(item)"
> >
{{ item.name }} — 展览精品 —
</div> </div>
</div> -->
<div class="crs-content-swiper wow animate__animated animate__fadeInUp"> <div class="crs-content-swiper wow animate__animated animate__fadeInUp">
<swiper :options="swiperOption2" ref="crSwiper"> <swiper :options="swiperOption2" ref="crSwiper">
<swiper-slide v-for="(v, i) in units" :key="i"> <swiper-slide v-for="(v, i) in units" :key="i">
<div class="crs-content-imgs"> <div class="crs-content-imgs">
<div class="item" v-for="(item, index) in crPics[i]" :key="index" @click="handleToCr(item.crId)"> <div
class="item"
v-for="(item, index) in crPics[i]"
:key="index"
@click="handleToCr(item.crId)"
>
<div class="img-container"> <div class="img-container">
<img :src="$getFullUrl(item.url)" alt="" /> <img :src="$getFullUrl(item.url)" alt="" />
</div> </div>
...@@ -148,20 +147,31 @@ ...@@ -148,20 +147,31 @@
<div class="guide smgz-item"> <div class="guide smgz-item">
<div class="guide-content"> <div class="guide-content">
<div class="guide-content-title wow animate__animated animate__fadeInDown"> <div
<!-- <img src="@/assets/imgs/boutique/smgz/5_guide/title.png" alt="" /> --> class="guide-content-title wow animate__animated animate__fadeInDown"
>
— 展览导航 — — 展览导航 —
</div> </div>
<div class="guide-content-imgs"> <div class="guide-content-imgs">
<div class="img-container wow animate__animated animate__fadeInLeft"> <div class="img-container wow animate__animated animate__fadeInLeft">
<!-- <img src="@/assets/imgs/boutique/smgz/5_guide/pic1.png" alt="" /> --> <ImageViewer
<ImageViewer :src="require(`@/assets/imgs/boutique/smgz-5/5_guide/pic1.png`)" :highImgSrc="require(`@/assets/imgs/boutique/smgz/5_guide/pic1.png`)" width="100%" height="100%" /> :src="require(`@/assets/imgs/boutique/smgz-5/5_guide/pic1.png`)"
:highImgSrc="
require(`@/assets/imgs/boutique/smgz/5_guide/pic1.png`)
"
width="100%"
height="100%"
/>
</div> </div>
<!-- <div class="img-container wow animate__animated animate__fadeInRight"> <div
<img src="@/assets/imgs/boutique/smgz/5_guide/pic2.png" alt="" /> class="guide-content-vr wow animate__animated animate__fadeInRight"
</div> --> id="vr-auto"
<div class="guide-content-vr wow animate__animated animate__fadeInRight" id="vr-auto"> >
<div class="vr-container" @click="handleChangeToVR" v-if="!showVrIFrame"> <div
class="vr-container"
@click="handleChangeToVR"
v-if="!showVrIFrame"
>
<img src="@/assets/imgs/boutique/smgz-5/5_guide/vr.png" alt="" /> <img src="@/assets/imgs/boutique/smgz-5/5_guide/vr.png" alt="" />
<div class="modal"> <div class="modal">
...@@ -173,16 +183,24 @@ ...@@ -173,16 +183,24 @@
</div> </div>
</div> </div>
<div class="vr-iframe vr-container" v-else> <div class="vr-iframe vr-container" v-else>
<div :class="['loading-modal', isVrFull ? 'vr-full' : '']" v-loading="showVrIFrame && !vrIFrameLoaded" <div
element-loading-text="正在加载神秘贵州展厅..." element-loading-spinner="el-icon-loading" :class="['loading-modal', isVrFull ? 'vr-full' : '']"
element-loading-background="rgba(0, 0, 0, 0.8)"> v-loading="showVrIFrame && !vrIFrameLoaded"
<iframe src="http://gz.people.com.cn/GB/222162/382387/402166/index.html" frameborder="0" element-loading-text="正在加载神秘贵州展厅..."
style="width: 100%; height: 100%" id="vr_iframe"></iframe> element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<iframe
src="http://gz.people.com.cn/GB/222162/382387/402166/index.html"
frameborder="0"
style="width: 100%; height: 100%"
id="vr_iframe"
></iframe>
<div class="icons" v-if="vrIFrameLoaded"> <div class="icons" v-if="vrIFrameLoaded">
<div class="icon-item" @click="handleClickFullScreen"> <div class="icon-item" @click="handleClickFullScreen">
<svg-icon icon-class="fullscreen2"></svg-icon> <svg-icon icon-class="fullscreen2"></svg-icon>
<span class="icon-text">{{ <span class="icon-text">{{
isVrFull? "缩小": "全屏" isVrFull ? "缩小" : "全屏"
}}</span> }}</span>
</div> </div>
<div class="icon-item" @click="handleExitVR"> <div class="icon-item" @click="handleExitVR">
...@@ -196,7 +214,9 @@ ...@@ -196,7 +214,9 @@
</div> </div>
</div> </div>
<div class="guide-content-3d-imgs wow animate__animated animate__fadeInUp"> <div
class="guide-content-3d-imgs wow animate__animated animate__fadeInUp"
>
<img src="@/assets/imgs/boutique/smgz/5_guide/guide.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/5_guide/guide.png" alt="" />
</div> </div>
</div> </div>
...@@ -253,9 +273,8 @@ import { swiper, swiperSlide } from "vue-awesome-swiper"; ...@@ -253,9 +273,8 @@ import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css"; import "swiper/dist/css/swiper.css";
import MDialog from "@/components/MDialog"; import MDialog from "@/components/MDialog";
import videoPlayer from "@/components/VideoPlayer"; import videoPlayer from "@/components/VideoPlayer";
import { crPics } from "../data"; import { crPics } from "./data";
import ImageViewer from '@/components/ImageViewer' import ImageViewer from "@/components/ImageViewer";
// import { SlideContainer, SlidePage } from 'vue-slidepage'
export default { export default {
name: "SMGZ", name: "SMGZ",
components: { components: {
...@@ -263,9 +282,7 @@ export default { ...@@ -263,9 +282,7 @@ export default {
swiperSlide, swiperSlide,
MDialog, MDialog,
videoPlayer, videoPlayer,
ImageViewer ImageViewer,
// SlideContainer,
// SlidePage
}, },
data() { data() {
let that = this; let that = this;
...@@ -276,7 +293,7 @@ export default { ...@@ -276,7 +293,7 @@ export default {
index: 0, index: 0,
name: "沉积巨著", name: "沉积巨著",
img: "3_unit/1-1-low.png", img: "3_unit/1-1-low.png",
hightImg: '3_unit/1-1.png', hightImg: "3_unit/1-1.png",
intro: intro:
"贵州素有“沉积岩王国”的美誉，亿万年的沉积地层蕴含了近6亿年的生命密码。展览运用长达26m的模型，配以代表性岩石标本，直观地展示贵州近9亿年的地层，巧妙地向观众科普相关地学知识。", "贵州素有“沉积岩王国”的美誉，亿万年的沉积地层蕴含了近6亿年的生命密码。展览运用长达26m的模型，配以代表性岩石标本，直观地展示贵州近9亿年的地层，巧妙地向观众科普相关地学知识。",
}, },
...@@ -284,7 +301,7 @@ export default { ...@@ -284,7 +301,7 @@ export default {
index: 1, index: 1,
name: "生命源头", name: "生命源头",
img: "3_unit/2-1-low.png", img: "3_unit/2-1-low.png",
hightImg: '3_unit/2-1.png', hightImg: "3_unit/2-1.png",
intro: intro:
"以无脊椎动物演化为线索，展示贵州震旦纪、寒武纪的重要生物群，以及奥陶纪至二叠纪的代表性生物，向观众科普这一时期生命从起源到兴盛、繁荣到衰亡的历程。", "以无脊椎动物演化为线索，展示贵州震旦纪、寒武纪的重要生物群，以及奥陶纪至二叠纪的代表性生物，向观众科普这一时期生命从起源到兴盛、繁荣到衰亡的历程。",
...@@ -293,7 +310,7 @@ export default { ...@@ -293,7 +310,7 @@ export default {
index: 2, index: 2,
name: "龙的故乡", name: "龙的故乡",
img: "3_unit/3-1-low.png", img: "3_unit/3-1-low.png",
hightImg: '3_unit/3-1.png', hightImg: "3_unit/3-1.png",
intro: intro:
"用盘县动物群、兴义动物群和关岭动物群的典型化石标本，讲述三叠纪时期海生爬行动物由兴盛到繁荣的景象,诠释了2亿年前欣欣向荣的贵州海洋世界。展出的118件展品中,有目前全球仅有的蔡胡氏典型鱼龙模式标本，数量稀少的中国始喙龟化石标本，罕见的疑似怀孕梁氏关岭鱼龙化石标本，以及大量的胡氏贵州龙和创孔海百合等古生物化石标本。", "用盘县动物群、兴义动物群和关岭动物群的典型化石标本，讲述三叠纪时期海生爬行动物由兴盛到繁荣的景象,诠释了2亿年前欣欣向荣的贵州海洋世界。展出的118件展品中,有目前全球仅有的蔡胡氏典型鱼龙模式标本，数量稀少的中国始喙龟化石标本，罕见的疑似怀孕梁氏关岭鱼龙化石标本，以及大量的胡氏贵州龙和创孔海百合等古生物化石标本。",
...@@ -302,7 +319,7 @@ export default { ...@@ -302,7 +319,7 @@ export default {
index: 3, index: 3,
name: "陆地寻踪", name: "陆地寻踪",
img: "3_unit/4-1-low.png", img: "3_unit/4-1-low.png",
hightImg: '3_unit/4-1.png', hightImg: "3_unit/4-1.png",
intro: intro:
"重点展示侏罗纪至第四纪时期陆地古生物的演化历程，用恐龙的模型、骨骼化石、足迹化石及第四纪哺乳动物化石标本，向观众科普相关知识，唤起人们尊重自然，保护环境，与自然和谐共生。", "重点展示侏罗纪至第四纪时期陆地古生物的演化历程，用恐龙的模型、骨骼化石、足迹化石及第四纪哺乳动物化石标本，向观众科普相关知识，唤起人们尊重自然，保护环境，与自然和谐共生。",
...@@ -411,7 +428,6 @@ export default { ...@@ -411,7 +428,6 @@ export default {
imgsArr.forEach((i) => { imgsArr.forEach((i) => {
// url中包含了data-url压缩图的才进行替换 // url中包含了data-url压缩图的才进行替换
if (i.id && i.id.indexOf("smgz-5")) { if (i.id && i.id.indexOf("smgz-5")) {
var imgObj = new Image(); //新建一个图片对象 var imgObj = new Image(); //新建一个图片对象
let lowImgSrc = i.id; let lowImgSrc = i.id;
let highImgSrc = lowImgSrc.replace("smgz-5", "smgz"); //最终显示的大图 let highImgSrc = lowImgSrc.replace("smgz-5", "smgz"); //最终显示的大图
...@@ -420,7 +436,7 @@ export default { ...@@ -420,7 +436,7 @@ export default {
imgObj.onload = function () { imgObj.onload = function () {
debugger; debugger;
lowImg.src = highImgSrc; lowImg.src = highImgSrc;
lowImg.classList.add('high') lowImg.classList.add("high");
}; };
} }
}); });
...@@ -527,11 +543,11 @@ export default { ...@@ -527,11 +543,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@function sWidth($width) { @function sWidth($width) {
@return $width * 1.2+px; @return $width * 1.2 + px;
} }
@function sHeight($height) { @function sHeight($height) {
@return $height * 0.8+px; @return $height * 0.8 + px;
} }
// 公共样式 // 公共样式
......
src/views/boutique/index-old.vue deleted 100644 → 0
浏览文件 @ 041fddb7
<template>
<div class="boutique">
<div class="boutique-header">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
<ul class="tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div :class="{ active: activeTab === node.tab }">
<span>{{ node.name }}</span>
</div>
</li>
</ul>
</div>
<!-- <ul class="fixed-tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div class="tab-container">
<img :src="
require(`@/assets/imgs/boutique/smgz/7_leftBar/${node.tab}.png`)
" alt="" />
<span class="name">{{ node.name }}</span>
</div>
</li>
</ul> -->
<!-- <div class="boutique-tabs">
<m-tabs @handleClickItem="handleClickItem"></m-tabs>
</div> -->
<div class="boutique-content" ref="boutiqueContent">
<div class="focus-content" v-if="activeTab">
<!-- <p v-if="activeTab == 'cjm'" style="display: flex; justify-content: center">
长角苗民俗及文化遗产
</p> -->
<SMGZ v-if="activeTab == 'smgz'" />
<YLGDYW v-else-if="activeTab == 'ylgdyw'" />
<JYYCC v-else-if="activeTab == 'jyycc'" />
<div v-else class="img-container">
<img
:src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)"
alt=""
/>
</div>
</div>
</div>
</div>
</template>
<script>
import mTabs from "@/views/home/components/Boutique.vue";
import SMGZ from "./components/SMGZ";
import YLGDYW from "./components/YLGDYW";
import JYYCC from "./components/jyycc";
import { mapGetters } from "vuex";
export default {
name: "Boutique",
components: { mTabs, SMGZ, YLGDYW, JYYCC },
data() {
return {
tabs: [
{ tab: "smgz", name: "神秘贵州" },
{ tab: "jyycc", name: "记忆与传承" },
{ tab: "ylgdyw", name: "夜郎的疑问" },
{ tab: "sdcs", name: "四渡赤水出奇兵" },
{ tab: "lzsg", name: "六枝梭戛" },
{ tab: "zggz", name: "中共贵州省工委斗争纪略展" },
{ tab: "gzjy", name: "贵州教育史馆" },
],
activeTab: "",
// content: { title: "四渡赤水" }
};
},
computed: {
...mapGetters(["navbarHeight"]),
content() {
let obj = Object.create(null);
const { tabs, activeTab } = this;
let node = tabs.find((n) => n.tab === activeTab);
node && (obj.title = node.name);
return obj;
},
},
watch: {
activeTab: {
handler: function (value) {
let color = "";
if (!value) {
return;
}
switch (value) {
case "sdcs":
color = "4";
break;
case "smgz":
color = "5";
break;
case "jyycc":
color = "6";
break;
case "ylgdyw":
color = "7";
break;
case "cjm":
color = "1";
}
this.$store.commit("app/CHANGE_NAV_COLOR", color);
},
immediate: true,
},
},
mounted() {
this.activeTab = "smgz";
},
methods: {
handleTabClick(data) {
this.activeTab = data.tab;
let el = document.getElementsByClassName("boutique-header")[0];
let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
document.documentElement.scroll({
top: height,
behavior: "smooth", // 平滑移动
});
},
// handleClickItem(key) {
// this.activeTab = key
// let el = document.getElementsByClassName("boutique-tabs")[0];
// let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
// document.documentElement.scroll({
// top: height,
// behavior: "smooth", // 平滑移动
// });
// }
},
};
</script>
<style lang="scss" scoped>
.boutique {
min-height: calc(100% - 300px);
.boutique-header {
position: relative;
overflow: hidden;
> img {
height: 500px;
object-fit: cover;
}
}
.boutique-tabs {
width: 100%;
height: 100vh;
cursor: pointer;
}
.fixed-tabs {
position: fixed;
left: 0;
top: 100px;
z-index: 9999;
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
display: none;
li {
flex: 1;
position: relative;
.tab-container {
width: 100px;
height: 100%;
position: absolute;
left: -70px;
transition: all ease 0.5s;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
left: 0;
.name {
opacity: 1;
}
}
img {
width: 100%;
height: 100%;
}
.name {
position: absolute;
left: 2px;
opacity: 0;
color: #fff;
font-family: "SourceHanSerifCN-Bold";
width: 80%;
margin: 4px;
}
}
}
// li {
// margin-bottom: 32px;
// & > span {
// color: #fff;
// cursor: pointer;
// }
// }
}
.boutique-title {
height: 500px;
position: relative;
overflow: hidden;
z-index: 1;
> p {
margin: 0;
font-size: 46px;
font-weight: 600;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: 12px;
background-image: -webkit-linear-gradient(45deg, #98bcff, #814b02);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: hue 6s infinite linear;
}
> span {
font-weight: 600;
font-family: "宋体";
font-size: 24px;
position: absolute;
top: 65%;
left: 60%;
color: #666;
}
}
ul.tabs {
display: flex;
justify-content: space-between;
position: absolute;
z-index: 1;
padding: 10px 0;
width: 100%;
bottom: 0;
> li {
flex: 1;
> div {
text-align: center;
> span {
font-size: 20px;
color: #333;
font-weight: 600;
font-family: "楷体";
&:hover {
cursor: pointer;
position: relative;
color: #003fa7;
&::after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid $deep-blue;
border-radius: 30px;
}
}
}
&.active {
> span {
position: relative;
color: #003fa7;
text-shadow: 6px 2px 2px #999;
&::after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid $deep-blue;
border-radius: 30px;
}
}
}
}
}
}
.boutique-content {
.focus-content {
// padding: 20px 0;
// margin: 20px;
box-shadow: 1px 12px 10px 1px #ddd;
margin-top: 0;
min-height: 600px;
// display: flex;
// justify-content: center;
// align-items: center;
font-size: 30px;
// font-weight: 600;
// background: rgb(239 247 255);
> p {
margin: 0;
}
.img-container {
width: 100%;
img {
width: 100%;
}
}
}
}
}
@keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
</style>
src/views/boutique/index.vue
浏览文件 @ 9f7935b0
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
<script> <script>
// import mTabs from '@/views/home/components/Boutique.vue' // import mTabs from '@/views/home/components/Boutique.vue'
import SMGZ from "./components/SMGZ"; //神秘贵州 import SMGZ from "./components/smgz/index"; //神秘贵州
import YLGDYW from "./components/YLGDYW"; //夜郎的疑问 import YLGDYW from "./components/ylgdyw/index"; //夜郎的疑问
import JYYCC from "./components/jyycc"; //技艺与传承 import JYYCC from "./components/jyycc"; //技艺与传承
import SDCS from "./components/sdcs"; //四渡赤水 import SDCS from "./components/sdcs"; //四渡赤水
import JYSG from "./components/jysg"; //教育史馆 import JYSG from "./components/jysg"; //教育史馆
......
src/views/caj/index.vue deleted 100644 → 0
浏览文件 @ 041fddb7
<template>
<!-- 本文件由HTML+css+jquery页面修改而来，后期优化，暂时能够使用即可 -->
<div>
<!-- 头部 -->
<div class="head_top">
<img class="head_logo_img" src="@/assets/images/caj/Logo_banner.png" />
</div>
<!-- 内容区域 -->
<div class="content">
<!-- 标题 -->
<div class="content_title">
<ul>
<li
@click="changeDemo(item.value)"
:class="{ active: currentDemo == item.value, 'list-item': true }"
v-for="(item, index) in list"
:key="index"
>
{{ item.label }}
</li>
</ul>
</div>
<!-- 表头 -->
<div class="content_head">
<ul>
<li style="width: 27%">软件名称</li>
<li style="width: 15%">软件大小</li>
<li style="width: 15%">系统版本</li>
<li style="width: 15%">更新时间</li>
<li style="width: 15%">下载地址</li>
</ul>
</div>
<!-- 内容列表 -->
<div class="content_line">
<!-- TXUOS 列表 -->
<ul class="out_ul" v-show="currentDemo === 'TXUOS'">
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/intel.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">Intel,AMD</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
47.6M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="TXUOS_INTER"></a>
</li>
<!--<li style="width:15%;margin-left:15px;line-height:50px;" class="in_ul_li"> <button class="download" onclick="downloads()"></button></li>-->
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>飞腾FT200，鲲鹏920</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
56.6M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="TXUOS_FT"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/longxin.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">龙芯3A4000</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
56.4M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="TXUOS_LX3A4000"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/longxin.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">龙芯3A5000</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
60.7M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="TXUOS_LX3A5000"></a>
</li>
</ul>
</li>
<!-- <li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>昆明市人民检察院适配安装包</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
47.6M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a
class="download"
:href="TXUOS_KMSRMJCY"
></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px; font-size: 13px"
>南涧彝族自治县人民检察院适配安装包</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
56.6M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a
class="download"
href="./SoftWare/TXUOS/NJXRMJCY/signed_net.cnki.cajviewer_1.2.0-1_mips64.deb.deb"
></a>
</li>
</ul>
</li> -->
</ul>
<!--银河麒麟-->
<ul class="out_ul" v-show="currentDemo === 'YHQL'">
<!-- ... （省略部分代码） -->
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/intel.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">Intel,AMD</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
47.7M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
银河麒麟
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="YHQL_INTER"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>飞腾FT2000，鲲鹏920，麒麟990</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
46.7M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
银河麒麟
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="YHQL_FT"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/longxin.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">龙芯3A4000</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
64.8M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
银河麒麟
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="YHQL_LX3A4000"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/longxin.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">龙芯3A5000</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
60.6M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
银河麒麟
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="YHQL_LX3A5000"></a>
</li>
</ul>
</li>
</ul>
<!--中科方德-->
<ul class="out_ul" v-show="currentDemo === 'ZKFD'">
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>服务器端（rpm文件）</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
35.4M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
中科方德
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="ZKFD_SERVER"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>桌面端（deb文件）</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
47.7M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
中科方德
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="ZKFD_CLIENT"></a>
</li>
</ul>
</li>
</ul>
<!--Windows-->
<ul class="out_ul" v-show="currentDemo === 'WIN'">
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>CAJViewer 8（64-bit）</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
111M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
Windows
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="WINDOWS_64"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>CAJViewer 8（32-bit）</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
109M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
Windows
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="WINDOWS_32"></a>
</li>
</ul>
</li>
</ul>
<!--绝大部分操作系统都可以用，x86的linux都可以用。包括 kylin, uos, 中科方德-->
<ul class="out_ul" v-show="currentDemo === 'JDBF'">
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>CAJViewer-x86_64</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
64.2M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
绝大部分适配
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="JDBF"></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import fullUrl from "./urls";
export default {
data() {
return {
list: [
{
label: "Windows系统适配",
value: "WIN",
},
{
label: "统信UOS",
value: "TXUOS",
},
{
label: "银河麒麟",
value: "YHQL",
},
{
label: "中科方德",
value: "ZKFD",
},
{
label: "绝大部分国产化系统适配",
value: "JDBF",
},
],
currentDemo: "WIN",
activeBg: require("@/assets/images/caj/title_bg2.png"),
defaultBg: require("@/assets/images/caj/title_bg1.png"),
...fullUrl,
};
},
methods: {
changeDemo(n) {
this.currentDemo = n;
},
},
};
</script>
<style scoped lang="scss">
/* 样式表样式（将原来的样式表内容放在这里） */
@charset "utf-8";
b,
i {
font-style: normal;
font-weight: normal;
}
a:link,
a:visited {
color: #333;
}
.cBlu:link,
.cBlu:visited,
.cBlu {
color: #107bce;
}
.gray:link,
.gray:visited {
color: #107bce;
}
a:hover {
text-decoration: none;
color: #c5c527;
cursor: pointer;
}
input,
select {
border: none;
outline: none;
}
.wrap,
.wrapper,
.header_t_in,
.header_b,
.main_sz,
.bigNav,
.footerL_gf-in,
.reader-tools-bar {
width: 1200px;
margin: 0 auto;
}
body {
font-family: "\5FAE\8F6F\96C5\9ED1";
background-color: #f8f8f8;
}
/* 首页标头*/
.head_top {
width: 100%;
height: 135px;
img {
width: 100%;
}
}
.head_left_link {
float: left;
width: 100px;
color: #fff;
text-align: center;
font-size: 12px;
margin-top: -5px;
}
.head_right_link {
float: right;
width: 300px;
color: #fff;
text-align: center;
font-size: 12px;
margin-top: -5px;
}
// .head_title {
// width: 100%;
// height: 190px;
// background: url(@/assets/images/caj/index/banner.png);
// background-size: 100% 100%;
// }
// .head_title img {
// width: 40%;
// height: 60px;
// /*position: absolute;*/
// margin-left: 30%;
// /*left: 50%;*/
// /*top: 40%;*/
// /*margin-left: -350px;*/
// /*margin-top: -190px;*/
// /*margin: 0 auto;*/
// margin-top: 55px;
// }
.head_logo_img {
/*height: 120px;*/
background-size: 100% 100%;
}
.content {
width: 100%;
height: auto;
background-color: #f0f0f0;
padding-top: 60px;
}
.content_title {
width: 80%;
height: 130px;
margin-left: 10%;
margin-top: -20px;
}
.content_title ul {
width: 100%;
height: 130px;
list-style: none;
}
.content_title ul li {
width: 19%;
height: 120px;
float: left;
text-align: center;
line-height: 100px;
margin-left: 12px;
background-image: url(@/assets/images/caj/title_bg1.png);
background-size: 100% 100%;
}
.list-item {
// margin-left: ;
}
.active {
background-image: url(@/assets/images/caj/title_bg2.png) !important;
color:#fff;
}
.content_head {
width: 80%;
height: 50px;
margin-left: 10%;
margin-top: -20px;
}
.content_head ul {
width: 100%;
height: 50px;
list-style: none;
}
.content_head ul li {
height: 50px;
float: left;
line-height: 50px;
text-align: center;
margin-left: 15px;
}
.content_line {
width: 80%;
height: 650px;
margin-left: 10%;
margin-top: -20px;
}
.out_ul {
width: 100%;
height: auto;
list-style: none;
font-size: 14px;
color: #808080;
}
.out_ul_li {
width: 98%;
height: 80px;
margin-top: 25px;
}
.in_ul {
width: 100%;
height: 80px;
list-style: none;
background-image: url(@/assets/images/caj/line_li_bg.png);
background-size: 100% 100%;
}
.in_ul_li {
height: 80px;
float: left;
line-height: 60px;
text-align: center;
&:nth-child(1){
padding-left: 140px;
}
}
.download:hover {
background-image: url(@/assets/images/caj/download2.png);
}
.in_ul_li button {
background-image: url(@/assets/images/caj/download.png);
width: 120px;
height: 40px;
background-size: 100% 100%;
border: none;
}
.download {
background-image: url(@/assets/images/caj/download.png);
margin-left: 60px;
width: 120px;
height: 36px;
display: block;
background-size: cover;
margin-top: 10px;
}
</style>
src/views/caj/urls.js deleted 100644 → 0
浏览文件 @ 041fddb7
// const baseUrl = process.env.VUE_APP_BASE_HOST
const baseUrl = ''
const folder = '/SoftWare'
const urls = {
TXUOS_INTER:
"/TXUOS/inter/net.cnki.cajviewer_1.1.1-3_amd64.deb",
TXUOS_FT: "/TXUOS/FT/net.cnki.cajviewer_1.1.1-3_arm64.deb",
TXUOS_LX3A4000:
"/TXUOS/LX3A4000/net.cnki.cajviewer_1.1.1-3_mips64.deb",
TXUOS_LX3A5000:
"/TXUOS/LX3A5000/net.cnki.cajviewer_1.1.0-2_loongarch64.deb",
TXUOS_KMSRMJCY:
"/TXUOS/KMSRMJCY/signed_net.cnki.cajviewer_1.2.0-1_mips64.deb.deb",
YHQL_INTER: "/YHQL/inter/cajviewer_1.1.1-3_amd64.deb",
YHQL_FT: "/YHQL/FT/cajviewer_1.1.1-3_arm64.deb",
YHQL_LX3A4000: "/YHQL/LX3A4000/cajviewer_1.1.1-3_mips64.deb",
YHQL_LX3A5000:
"/YHQL/LX3A5000/cajviewer_1.1.0-2_loongarch64.deb",
ZKFD_SERVER: "/ZKFD/Server/cajviewer-1.1.1-3.nfs4.x86_64.rpm",
ZKFD_CLIENT: "/ZKFD/Client/cajviewer_1.1.1-3_amd64.deb",
WINDOWS_64: "/Windows/64/CAJViewer 8.1_x64-setup.exe",
WINDOWS_32: "/Windows/32/CAJViewer8.0.1.1-setup.exe",
JDBF: "/JDBF/CAJViewer-x86_64-1.1.1.AppImage",
}
const fullUrl = addBaseUrl(urls)
// 增加baseUrl
function addBaseUrl() {
const newUrls = {}
for (const key in urls) {
newUrls[key] = baseUrl + folder + urls[key]
}
return newUrls
}
export default fullUrl
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论