20241119提交

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}

config.js

@@ -0,0 +1 @@
+var config = {apiUrl: 'http://58.49.77.70:8443', bookApiUrl:'http://58.49.77.70:19000', libcode: '1201'}  

css/index.css

@@ -0,0 +1,755 @@
+
+/**滚动条的宽度*/
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/**滚动条的滑块*/
+::-webkit-scrollbar-thumb {
+  background-color:  rgba(0,0,0,.3);
+  border-radius: 4px;
+}
+
+/**只需要加上这一行*/
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+@font-face {
+  font-family: "DOUYU-Regular";
+  src: url('../fonts/斗鱼追光体.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "PingFang";
+  src: url('../fonts/PingFang.ttc');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.ai-wrapper{
+  position: relative;
+  width: 100vw;
+  height: 100%;
+  min-height: 100vh;
+}
+
+.ai-bg{
+  width: 100%; 
+  height: 100%; 
+  min-height: 100vh;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 3;
+}
+
+.page-content{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  font-family: 'PingFang';
+}
+
+/* 帮助 */
+.layer-help-box {
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 36%;
+  width: 672px;
+  height: 810px;
+  margin-left: -405px;
+  padding: 64px;
+  color: #fff;
+  background: url('../images/1080_12.png') no-repeat left top;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.layer-help-box h4{
+  font-family: "DOUYU-Regular";
+  font-size: 40px;
+}
+
+.help-top-text{
+  padding: 20px 0;
+  font-size: 28px;
+  color: rgba(255,255,255,0.7);
+}
+
+.help-tip li{
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 576px;
+  height: 109px;
+  padding-left: 110px;
+  background: url('../images/1080_1.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li span{
+  display: block;
+  flex: 1;
+  padding-top: 10px;  
+  font-size: 32px;
+  font-family: "DOUYU-Regular";
+}
+
+.help-tip li p{
+  width: 360px;
+  padding: 0 20px;
+  font-size: 24px;
+  line-height: 30px;
+}
+
+.help-tip li::before{
+  content: "";
+  position: absolute;
+  left: 28px;
+  top: 50%;
+  width: 54px;
+  height: 54px;
+  margin-top: -27px;
+}
+
+.help-tip li:nth-child(1)::before{
+  background: url('../images/1080_10.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li:nth-child(1){
+  animation-delay: 1s;
+}
+
+.help-tip li:nth-child(2)::before{
+  background: url('../images/1080_9.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li:nth-child(2){
+  animation-delay: 1.2s;
+}
+
+.help-tip li:nth-child(3)::before{
+  background: url('../images/1080_13.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li:nth-child(3){
+  animation-delay: 1.4s;
+}
+
+.help-tip li:nth-child(4)::before{
+  background: url('../images/1080_14.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li:nth-child(4){
+  animation-delay: 1.6s;
+}
+
+.help-tip li:nth-child(5)::before{
+  background: url('../images/1080_11.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li:nth-child(5){
+  animation-delay: 1.8s;
+}
+
+.chat-container {
+  position: absolute;
+  left: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.three-chat-container{
+  position: absolute;
+  left: 40px;
+  top: 10%;
+}
+
+.chat-message {
+  position: relative;
+  margin-bottom: 40px;
+}
+.message-content {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.message-avatar {
+  width: 80px;
+  height: 80px;
+  margin-right: 20px;
+}
+.message-text {
+  max-width: 40%;
+  max-height: 184px;
+  overflow: hidden;
+  overflow-y: scroll;
+  padding: 20px 32px;
+  font-size: 28px;
+  border-radius: 4px 24px 24px 24px;
+  background: rgba(27,85,202,0.6);
+  color: #fff;
+  line-height: 40px;
+}
+
+/* 针对Webkit内核的浏览器隐藏滚动条 */
+.message-text::-webkit-scrollbar {
+  display: none;
+}
+
+/* 确保滚动内容的宽度足够宽，以显示滚动条 */
+.message-text {
+  scrollbar-width: none; /* Firefox */
+}
+
+.ai-message .message-text {
+  background: rgba(214,230,255,0.7);
+  color: #1A1A1A;
+}
+
+.loading{
+  display: block;
+  width: 57px;
+  height: 28px;
+  padding: 6px 0;
+}
+
+.ai-tip{
+  /* position: absolute;
+  top: 0;
+  right: 0; */
+  width: 972px;
+  height: 257px;
+  line-height: 257px;
+  font-size: 30px;
+  background: url('../images/tittle.png') no-repeat left top;
+  background-size: 100% 100%;
+  font-family: "DOUYU-Regular";
+  color: #000;
+  text-align: center;
+  margin: -40px auto 0 auto;
+   /* 动画持续时间 */
+  /* animation-duration: 2s; */
+   /* 动画立即开始 */
+  /* animation-delay: 1s; */
+   /* 保持最后一个动画帧的状态 */
+  /* animation-fill-mode: forwards; */
+   /* 无限次迭代 */
+  /* animation-iteration-count: infinite; */
+}
+
+.ai-nav{
+  position: absolute;
+  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 99999;
+}
+
+.ai-nav li{
+  position: relative;
+  width: 100px;
+  margin-bottom: 30px;
+  font-size: 30px;
+  font-family: "DOUYU-Regular";
+  text-align: center;
+  padding-top: 104px;
+}
+
+.ai-nav li p{
+  width: 120px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  background: rgba(27,85,202,0.6);
+  border-radius: 36px;
+  margin: 0 auto;
+}
+
+.ai-nav li span{
+  display: block;
+  width: 100%;
+  padding-top: 6px;
+  background: -webkit-linear-gradient(90deg, #FFFFFF 0%, #86CAFF 100%);
+  background: linear-gradient(90deg, #FFFFFF 0%, #86CAFF 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.ai-nav li::before{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 10px;
+  width: 100px;
+  height: 100px;
+}
+
+.ai-nav li.nav-home::before{
+  background: url('../images/home.webp') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.ai-nav li.nav-talk::before{
+  background: url('../images/talk.webp') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.ai-nav li.talk-ing::before{
+  background: url('../images/talk-1.webp') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.ai-nav li.talk-end::before{
+  background: url('../images/talk-2.webp') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.ai-nav li.nav-help::before{
+  background: url('../images/help.webp') no-repeat left top;
+  background-size: 100% 100%;
+}
+.other-content{
+  position: fixed;
+  top: 50%;
+  left: 40px;
+  transform: translateY(-50%);
+}
+.book-box{
+  position: relative;
+}
+.layer-book-box {
+  display: none;
+  width: 800px;
+  /* height: 1014px; */
+  background: url('../images/2160_3.png') no-repeat left top;
+  background-size: 100% 100%;
+  overflow: hidden;
+  
+}
+
+.layer-header{
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 82px);
+  height: 80px;
+  line-height: 80px;
+  padding: 0 40px;
+  margin-left: 2px;
+  border-radius: 14px 14px 0 0;
+  background: linear-gradient( 90deg, #5B9DFF 0%, rgba(91,157,255,0) 100%);
+}
+
+.layer-header h3{
+  font-size: 40px;
+  font-weight: 600;
+  color: #fff;
+  /* text-shadow: 0px 0px 20px #0B88FC, 0px 0px 35px #0B0B88, 0px 0px 51px #0B88FC; */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.layer-closed{
+  position: absolute;
+  right: 40px;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  background: url('../images/1080_15.png') no-repeat left top;
+  background-size: 100% 100%;
+  margin-top: 24px;
+  cursor: pointer;
+}
+
+.mySwiper{
+  width: 100%;
+  height: 100%;
+  padding-bottom: 40px;
+}
+.book-last{
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 44px;
+  line-height: 46px;
+  padding: 0 40px;
+}
+.book-result{
+  width: 500px;
+  font-size: 28px;
+  color: rgba(255,255,255,0.7);
+}
+.swiper-button-prev{
+  width: 44px;
+  height: 44px;
+  position: relative;
+  left: auto;
+  right: auto;
+  top: auto;
+  bottom: auto;
+  margin-top: 1px;
+}
+.swiper-button-prev::after{
+  content: "";
+  width: 44px;
+  height: 44px;
+  background: url('../images/2160_5.png') no-repeat left center;
+  background-size: 100% 100%;
+}
+.swiper-button-next{
+  width: 44px;
+  height: 44px;
+  position: relative;
+  left: auto;
+  right: auto;
+  top: auto;
+  bottom: auto;
+  margin-top: 1px;
+}
+.swiper-button-next::after{
+  content: "";
+  width: 44px;
+  height: 44px;
+  background: url('../images/2160_6.png') no-repeat left center;
+  background-size: 100% 100%;
+}
+.swiper-pagination-fraction{
+  position: static;
+  left: auto;
+  right: auto;
+  top: auto;
+  bottom: auto;
+  flex: 1;
+  font-size: 28px;
+  text-align: center;
+  color: rgba(255,255,255,0.7);
+}
+.book-wrapper{
+  padding: 40px;
+}
+.book-info{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.info-img{
+  display: flex;
+  align-items: center;
+  width: 340px;
+  height: 380px;
+  background-color: #fff;
+}
+.info-img img{
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.info-img img.dxh-class{
+  display: block;
+  width: 200px;
+  height: 200px;
+  margin: 0 auto;
+}
+
+.info-text{
+  flex: 1;
+  margin-left: 30px;
+  color: #fff;
+  font-size: 28px;
+  line-height: 48px;
+}
+
+.info-text p{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.info-text p i{
+  display: block;
+  width: 120px;
+  text-align: right;
+}
+
+.info-text p span{
+  display: block;
+  flex: 1;
+}
+
+.info-text p:nth-child(1){
+  font-size: 40px;
+  line-height: 66px;
+  height: 122px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.info-text p:nth-child(2){
+  /* opacity: .7; */
+  margin-top: 20px;
+}
+
+.info-text p:nth-child(2) span{
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.info-text p:nth-child(3) span{
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.info-text p.gist-content{
+  align-items: flex-start;
+}
+.info-text p.gist-content span{
+  max-height: 96px;
+  overflow: hidden;
+  overflow-y: auto;
+  display: block;
+  word-wrap: break-word;
+}
+.place-book{
+  max-height: 400px;
+  margin-bottom: 20px;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+.place-book a{
+  position: relative;
+  display: block;
+  height: 80px;
+  line-height: 80px;
+  padding: 0 32px;
+  margin-bottom: 20px;
+  font-size: 28px;
+  color: #fff;
+  background: rgba(27,85,202,0.6);
+  border-radius: 24px;
+}
+.place-book a::after{
+  content: "";
+  position: absolute;
+  right: 32px;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  background: url('../images/2160_9.png') no-repeat left top;
+  background-size: 100% 100%;
+  transform: rotate(180deg);
+}
+.place-book a:last-child{
+  margin-bottom: 0;
+}
+
+.place-book a.no-data::after{
+  content: "";
+  background: none;
+}
+
+.layer-video-box{
+  display: none;
+  width: 800px;
+  height: 712px;
+  background: url('../images/2160_3.png') no-repeat left top;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.video-box{
+  padding: 40px;
+  width: calc(100% - 80px);
+  height: calc(100% - 160px);
+}
+
+.video-box video{
+  background-color: #000;
+}
+
+.layer-place-box{
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 800px;
+  height: 1000px;
+  background: url('../images/2160_3.png') no-repeat left top;
+  background-size: 100% 100%;
+  overflow: hidden;
+  z-index: 999;
+}
+
+.layer-place-header{
+  padding-left: 50px;
+  font-size: 40px;
+  color: #fff;
+  height: 56px;
+  line-height: 56px;
+  background: url('../images/2160_9.png') no-repeat left center;
+  background-size: 40px 40px;
+}
+
+.layer-place2-box{
+  display: none;
+  width: 800px;
+  height: 1000px;
+  background: url('../images/2160_3.png') no-repeat left top;
+  background-size: 100% 100%;
+  overflow: hidden;
+  z-index: 999;
+}
+
+.map-content,
+.map-content2{
+  width: calc(100% - 128px);
+  height: calc(100% - 208px);
+  margin: 64px;
+  background-color: #fff;
+  overflow: hidden;
+}
+
+
+.layer-img3-box{
+  display: none;
+  position: relative;
+  width: 800px;
+  height: 800px;
+  overflow: hidden;
+  z-index: 999;
+}
+
+.threeImg-content{
+  width: calc(100% - 120px);
+  height: calc(100%);
+  overflow: hidden;
+}
+
+.layer-img3-box .layer-closed{
+  right: 220px;
+  top: -15px;
+  background: url('../images/black-closed.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.threeImg-info{
+  position: absolute;
+  top: 50%;
+  right: 135px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  background-color: rgba(0,0,0,.5);
+  padding: 30px 20px;
+  transform: translateY(-50%);
+  color: #fff;
+  border-radius: 4px;
+}
+
+.three-name{
+  position: relative;
+  font-size: 30px;
+  line-height: 32px;
+  padding: 6px 0 ;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  max-height: 230px;
+}
+
+.three-name::before,
+.three-name::after{
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #fff;
+}
+.three-name::before{
+  top: 0;
+}
+.three-name::after{
+  bottom: 0;
+}
+
+.three-size{
+  text-align: center;
+  font-size: 22px;
+  margin: 20px 0;
+}
+.three-dimension{
+  display: block;
+}
+
+.three-unit{
+  position: relative;
+  font-size: 16px;
+  margin-top: 20px;
+}
+
+.three-unit::before{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #fff;
+}
+
+.three-date{
+  position: relative;
+  max-width: 100px;
+  font-size: 22px;
+  padding: 6px 0;
+  text-align: center;
+}
+
+.three-date::before{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #fff;
+}

css/index2.css

@@ -0,0 +1,756 @@
+
+/**滚动条的宽度*/
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/**滚动条的滑块*/
+::-webkit-scrollbar-thumb {
+  background-color:  rgba(0,0,0,.3);
+  border-radius: 4px;
+}
+
+/**只需要加上这一行*/
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+@font-face {
+  font-family: "DOUYU-Regular";
+  src: url('../fonts/斗鱼追光体.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "PingFang";
+  src: url('../fonts/PingFang.ttc');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.ai-wrapper{
+  position: relative;
+  width: 100vw;
+  height: 100%;
+  min-height: 100vh;
+}
+
+.ai-bg{
+  width: 100%; 
+  height: 100%; 
+  min-height: 100vh;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 3;
+}
+
+.page-content{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  font-family: 'PingFang';
+}
+
+/* 帮助 */
+.layer-help-box {
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 36%;
+  width: 672px;
+  height: 810px;
+  margin-left: -405px;
+  padding: 64px;
+  color: #fff;
+  background: url('../images/1080_12.png') no-repeat left top;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.layer-help-box h4{
+  font-family: "DOUYU-Regular";
+  font-size: 40px;
+}
+
+.help-top-text{
+  padding: 20px 0;
+  font-size: 28px;
+  color: rgba(255,255,255,0.7);
+}
+
+.help-tip li{
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 576px;
+  height: 109px;
+  padding-left: 110px;
+  background: url('../images/1080_1.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li span{
+  display: block;
+  flex: 1;
+  padding-top: 10px;  
+  font-size: 32px;
+  font-family: "DOUYU-Regular";
+}
+
+.help-tip li p{
+  width: 360px;
+  padding: 0 20px;
+  font-size: 24px;
+  line-height: 30px;
+}
+
+.help-tip li::before{
+  content: "";
+  position: absolute;
+  left: 28px;
+  top: 50%;
+  width: 54px;
+  height: 54px;
+  margin-top: -27px;
+}
+
+.help-tip li:nth-child(1)::before{
+  background: url('../images/1080_10.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li:nth-child(1){
+  animation-delay: 1s;
+}
+
+.help-tip li:nth-child(2)::before{
+  background: url('../images/1080_9.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li:nth-child(2){
+  animation-delay: 1.2s;
+}
+
+.help-tip li:nth-child(3)::before{
+  background: url('../images/1080_13.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li:nth-child(3){
+  animation-delay: 1.4s;
+}
+
+.help-tip li:nth-child(4)::before{
+  background: url('../images/1080_14.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li:nth-child(4){
+  animation-delay: 1.6s;
+}
+
+.help-tip li:nth-child(5)::before{
+  background: url('../images/1080_11.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.help-tip li:nth-child(5){
+  animation-delay: 1.8s;
+}
+
+.chat-container {
+  position: absolute;
+  left: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.three-chat-container{
+  position: absolute;
+  left: 40px;
+  top: 16%;
+}
+
+
+.chat-message {
+  position: relative;
+  margin-bottom: 40px;
+}
+.message-content {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.message-avatar {
+  width: 80px;
+  height: 80px;
+  margin-right: 20px;
+}
+.message-text {
+  max-width: 50%;
+  max-height: 184px;
+  overflow: hidden;
+  overflow-y: scroll;
+  padding: 20px 32px;
+  font-size: 28px;
+  border-radius: 4px 24px 24px 24px;
+  background: rgba(27,85,202,0.6);
+  color: #fff;
+  line-height: 40px;
+}
+
+/* 针对Webkit内核的浏览器隐藏滚动条 */
+.message-text::-webkit-scrollbar {
+  display: none;
+}
+
+/* 确保滚动内容的宽度足够宽，以显示滚动条 */
+.message-text {
+  scrollbar-width: none; /* Firefox */
+}
+
+.ai-message .message-text {
+  background: rgba(214,230,255,0.7);
+  color: #1A1A1A;
+}
+
+.loading{
+  display: block;
+  width: 57px;
+  height: 28px;
+  padding: 6px 0;
+}
+
+.ai-tip{
+  /* position: absolute;
+  top: 0;
+  right: 0; */
+  width: 972px;
+  height: 257px;
+  line-height: 257px;
+  font-size: 30px;
+  background: url('../images/tittle.png') no-repeat left top;
+  background-size: 100% 100%;
+  font-family: "DOUYU-Regular";
+  color: #000;
+  text-align: center;
+  margin: -40px auto 0 auto;
+   /* 动画持续时间 */
+  /* animation-duration: 2s; */
+   /* 动画立即开始 */
+  /* animation-delay: 1s; */
+   /* 保持最后一个动画帧的状态 */
+  /* animation-fill-mode: forwards; */
+   /* 无限次迭代 */
+  /* animation-iteration-count: infinite; */
+}
+
+.ai-nav{
+  position: absolute;
+  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 99999;
+}
+
+.ai-nav li{
+  position: relative;
+  width: 100px;
+  margin-bottom: 30px;
+  font-size: 30px;
+  font-family: "DOUYU-Regular";
+  text-align: center;
+  padding-top: 104px;
+}
+
+.ai-nav li p{
+  width: 120px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  background: rgba(27,85,202,0.6);
+  border-radius: 36px;
+  margin: 0 auto;
+}
+
+.ai-nav li span{
+  display: block;
+  width: 100%;
+  padding-top: 6px;
+  background: -webkit-linear-gradient(90deg, #FFFFFF 0%, #86CAFF 100%);
+  background: linear-gradient(90deg, #FFFFFF 0%, #86CAFF 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.ai-nav li::before{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 10px;
+  width: 100px;
+  height: 100px;
+}
+
+.ai-nav li.nav-home::before{
+  background: url('../images/home.webp') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.ai-nav li.nav-talk::before{
+  background: url('../images/talk.webp') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.ai-nav li.talk-ing::before{
+  background: url('../images/talk-1.webp') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.ai-nav li.talk-end::before{
+  background: url('../images/talk-2.webp') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.ai-nav li.nav-help::before{
+  background: url('../images/help.webp') no-repeat left top;
+  background-size: 100% 100%;
+}
+.other-content{
+  position: fixed;
+  top: 50%;
+  left: 40px;
+  transform: translateY(-50%);
+}
+.book-box{
+  position: relative;
+}
+.layer-book-box {
+  display: none;
+  width: 800px;
+  /* height: 1014px; */
+  background: url('../images/2160_3.png') no-repeat left top;
+  background-size: 100% 100%;
+  overflow: hidden;
+  
+}
+
+.layer-header{
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 82px);
+  height: 80px;
+  line-height: 80px;
+  padding: 0 40px;
+  margin-left: 2px;
+  border-radius: 14px 14px 0 0;
+  background: linear-gradient( 90deg, #5B9DFF 0%, rgba(91,157,255,0) 100%);
+}
+
+.layer-header h3{
+  font-size: 40px;
+  font-weight: 600;
+  color: #fff;
+  /* text-shadow: 0px 0px 20px #0B88FC, 0px 0px 35px #0B0B88, 0px 0px 51px #0B88FC; */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.layer-closed{
+  position: absolute;
+  right: 40px;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  background: url('../images/1080_15.png') no-repeat left top;
+  background-size: 100% 100%;
+  margin-top: 24px;
+  cursor: pointer;
+}
+
+.mySwiper{
+  width: 100%;
+  height: 100%;
+  padding-bottom: 40px;
+}
+.book-last{
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 44px;
+  line-height: 46px;
+  padding: 0 40px;
+}
+.book-result{
+  width: 500px;
+  font-size: 28px;
+  color: rgba(255,255,255,0.7);
+}
+.swiper-button-prev{
+  width: 44px;
+  height: 44px;
+  position: relative;
+  left: auto;
+  right: auto;
+  top: auto;
+  bottom: auto;
+  margin-top: 1px;
+}
+.swiper-button-prev::after{
+  content: "";
+  width: 44px;
+  height: 44px;
+  background: url('../images/2160_5.png') no-repeat left center;
+  background-size: 100% 100%;
+}
+.swiper-button-next{
+  width: 44px;
+  height: 44px;
+  position: relative;
+  left: auto;
+  right: auto;
+  top: auto;
+  bottom: auto;
+  margin-top: 1px;
+}
+.swiper-button-next::after{
+  content: "";
+  width: 44px;
+  height: 44px;
+  background: url('../images/2160_6.png') no-repeat left center;
+  background-size: 100% 100%;
+}
+.swiper-pagination-fraction{
+  position: static;
+  left: auto;
+  right: auto;
+  top: auto;
+  bottom: auto;
+  flex: 1;
+  font-size: 28px;
+  text-align: center;
+  color: rgba(255,255,255,0.7);
+}
+.book-wrapper{
+  padding: 40px;
+}
+.book-info{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.info-img{
+  display: flex;
+  align-items: center;
+  width: 340px;
+  height: 380px;
+  background-color: #fff;
+}
+.info-img img{
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.info-img img.dxh-class{
+  display: block;
+  width: 200px;
+  height: 200px;
+  margin: 0 auto;
+}
+
+.info-text{
+  flex: 1;
+  margin-left: 30px;
+  color: #fff;
+  font-size: 28px;
+  line-height: 48px;
+}
+
+.info-text p{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.info-text p i{
+  display: block;
+  width: 120px;
+  text-align: right;
+}
+
+.info-text p span{
+  display: block;
+  flex: 1;
+}
+
+.info-text p:nth-child(1){
+  font-size: 40px;
+  line-height: 66px;
+  height: 122px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.info-text p:nth-child(2){
+  /* opacity: .7; */
+  margin-top: 20px;
+}
+
+.info-text p:nth-child(2) span{
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.info-text p:nth-child(3) span{
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.info-text p.gist-content{
+  align-items: flex-start;
+}
+.info-text p.gist-content span{
+  max-height: 96px;
+  overflow: hidden;
+  overflow-y: auto;
+  display: block;
+  word-wrap: break-word;
+}
+.place-book{
+  max-height: 400px;
+  margin-bottom: 20px;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+.place-book a{
+  position: relative;
+  display: block;
+  height: 80px;
+  line-height: 80px;
+  padding: 0 32px;
+  margin-bottom: 20px;
+  font-size: 28px;
+  color: #fff;
+  background: rgba(27,85,202,0.6);
+  border-radius: 24px;
+}
+.place-book a::after{
+  content: "";
+  position: absolute;
+  right: 32px;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  background: url('../images/2160_9.png') no-repeat left top;
+  background-size: 100% 100%;
+  transform: rotate(180deg);
+}
+.place-book a:last-child{
+  margin-bottom: 0;
+}
+
+.place-book a.no-data::after{
+  content: "";
+  background: none;
+}
+
+.layer-video-box{
+  display: none;
+  width: 800px;
+  height: 712px;
+  background: url('../images/2160_3.png') no-repeat left top;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.video-box{
+  padding: 40px;
+  width: calc(100% - 80px);
+  height: calc(100% - 160px);
+}
+
+.video-box video{
+  background-color: #000;
+}
+
+.layer-place-box{
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 800px;
+  height: 1000px;
+  background: url('../images/2160_3.png') no-repeat left top;
+  background-size: 100% 100%;
+  overflow: hidden;
+  z-index: 999;
+}
+
+.layer-place-header{
+  padding-left: 50px;
+  font-size: 40px;
+  color: #fff;
+  height: 56px;
+  line-height: 56px;
+  background: url('../images/2160_9.png') no-repeat left center;
+  background-size: 40px 40px;
+}
+
+.layer-place2-box{
+  display: none;
+  width: 800px;
+  height: 1000px;
+  background: url('../images/2160_3.png') no-repeat left top;
+  background-size: 100% 100%;
+  overflow: hidden;
+  z-index: 999;
+}
+
+.map-content,
+.map-content2{
+  width: calc(100% - 128px);
+  height: calc(100% - 208px);
+  margin: 64px;
+  background-color: #fff;
+  overflow: hidden;
+}
+
+
+.layer-img3-box{
+  display: none;
+  position: relative;
+  width: 800px;
+  height: 800px;
+  overflow: hidden;
+  z-index: 999;
+}
+
+.threeImg-content{
+  width: calc(100% - 120px);
+  height: calc(100%);
+  overflow: hidden;
+}
+
+.layer-img3-box .layer-closed{
+  right: 220px;
+  top: -15px;
+  background: url('../images/black-closed.png') no-repeat left top;
+  background-size: 100% 100%;
+}
+
+.threeImg-info{
+  position: absolute;
+  top: 50%;
+  right: 135px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  background-color: rgba(0,0,0,.5);
+  padding: 30px 20px;
+  transform: translateY(-50%);
+  color: #fff;
+  border-radius: 4px;
+}
+
+.three-name{
+  position: relative;
+  font-size: 30px;
+  line-height: 32px;
+  padding: 6px 0 ;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  max-height: 230px;
+}
+
+.three-name::before,
+.three-name::after{
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #fff;
+}
+.three-name::before{
+  top: 0;
+}
+.three-name::after{
+  bottom: 0;
+}
+
+.three-size{
+  text-align: center;
+  font-size: 22px;
+  margin: 20px 0;
+}
+.three-dimension{
+  display: block;
+}
+
+.three-unit{
+  position: relative;
+  font-size: 16px;
+  margin-top: 20px;
+}
+
+.three-unit::before{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #fff;
+}
+
+.three-date{
+  position: relative;
+  max-width: 100px;
+  font-size: 22px;
+  padding: 6px 0;
+  text-align: center;
+}
+
+.three-date::before{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #fff;
+}

css/libs/reset.css

@@ -0,0 +1,185 @@
+@charset "utf-8";
+
+/* CSS Document */
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+hr,
+button,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+button,
+input,
+select,
+textarea {
+  font: 12px arial, "微软雅黑"
+}
+
+input,
+select,
+textarea {
+  font-size: 100%;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th {
+  text-align: inherit;
+}
+
+fieldset,
+img {
+  border: 0;
+}
+
+iframe {
+  display: block;
+}
+
+abbr,
+acronym {
+  border: 0;
+  font-variant: normal;
+}
+
+del {
+  text-decoration: line-through;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+i,
+th,
+var {
+  font-style: normal;
+  font-weight: 500;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+caption,
+th {
+  text-align: left;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: 500;
+}
+
+q:before,
+q:after {
+  content: '';
+}
+
+ins,
+a {
+  text-decoration: none;
+}
+
+button {
+  border: 0;
+  outline: none;
+}
+
+
+/* common
+-----------------------------------------------*/
+
+.clearfix:after {
+  content: "\200B";
+  display: block;
+  height: 0;
+  clear: both;
+}
+
+.clearfix {
+  zoom: 1;
+}
+
+.clear {
+  clear: both;
+  visibility: hidden;
+}
+
+a {
+  color: #000;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #000;
+  text-decoration: none;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+input,
+textarea:focus {
+  outline: none;
+}
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}

js/libs/flexible.js

@@ -0,0 +1,147 @@
+(function(win, lib) {
+  var doc = win.document
+  var docEl = doc.documentElement
+  var metaEl = doc.querySelector('meta[name="viewport"]')
+  var flexibleEl = doc.querySelector('meta[name="flexible"]')
+  var dpr = 0
+  var scale = 0
+  var tid
+  var flexible = lib.flexible || (lib.flexible = {})
+
+  if (metaEl) {
+    console.warn('将根据已有的meta标签来设置缩放比例')
+    var match = metaEl
+      .getAttribute('content')
+      // eslint-disable-next-line no-useless-escape
+      .match(/initial\-scale=([\d\.]+)/)
+    if (match) {
+      scale = parseFloat(match[1])
+      dpr = parseInt(1 / scale)
+    }
+  } else if (flexibleEl) {
+    var content = flexibleEl.getAttribute('content')
+    if (content) {
+      // eslint-disable-next-line no-useless-escape
+      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
+      // eslint-disable-next-line no-useless-escape
+      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
+      if (initialDpr) {
+        dpr = parseFloat(initialDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+      if (maximumDpr) {
+        dpr = parseFloat(maximumDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+    }
+  }
+
+  if (!dpr && !scale) {
+    // eslint-disable-next-line no-unused-vars
+    var isAndroid = win.navigator.appVersion.match(/android/gi)
+    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
+    var devicePixelRatio = win.devicePixelRatio
+    if (isIPhone) {
+      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+        dpr = 3
+      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+        dpr = 2
+      } else {
+        dpr = 1
+      }
+    } else {
+      // 其他设备下，仍旧使用1倍的方案
+      dpr = 1
+    }
+    scale = 1 / dpr
+  }
+
+  docEl.setAttribute('data-dpr', dpr)
+  if (!metaEl) {
+    metaEl = doc.createElement('meta')
+    metaEl.setAttribute('name', 'viewport')
+    metaEl.setAttribute(
+      'content',
+      'initial-scale=' +
+        scale +
+        ', maximum-scale=' +
+        scale +
+        ', minimum-scale=' +
+        scale +
+        ', user-scalable=no'
+    )
+    if (docEl.firstElementChild) {
+      docEl.firstElementChild.appendChild(metaEl)
+    } else {
+      var wrap = doc.createElement('div')
+      wrap.appendChild(metaEl)
+      doc.write(wrap.innerHTML)
+    }
+  }
+
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width
+    // 最小1366px，最大适配2560px
+    if (width / dpr < 1366) {
+      width = 1366 * dpr
+    } else if (width / dpr > 2560) {
+      width = 2560 * dpr
+    }
+    // 设置成24等份，设计稿时1920px的，这样1rem就是80px
+    var rem = width / 24
+    docEl.style.fontSize = rem + 'px'
+    flexible.rem = win.rem = rem
+  }
+
+  win.addEventListener(
+    'resize',
+    function() {
+      clearTimeout(tid)
+      tid = setTimeout(refreshRem, 300)
+    },
+    false
+  )
+  win.addEventListener(
+    'pageshow',
+    function(e) {
+      if (e.persisted) {
+        clearTimeout(tid)
+        tid = setTimeout(refreshRem, 300)
+      }
+    },
+    false
+  )
+
+  if (doc.readyState === 'complete') {
+    doc.body.style.fontSize = 12 * dpr + 'px'
+  } else {
+    doc.addEventListener(
+      'DOMContentLoaded',
+      // eslint-disable-next-line no-unused-vars
+      function(e) {
+        doc.body.style.fontSize = 12 * dpr + 'px'
+      },
+      false
+    )
+  }
+
+  refreshRem()
+
+  flexible.dpr = win.dpr = dpr
+  flexible.refreshRem = refreshRem
+  flexible.rem2px = function(d) {
+    var val = parseFloat(d) * this.rem
+    if (typeof d === 'string' && d.match(/rem$/)) {
+      val += 'px'
+    }
+    return val
+  }
+  flexible.px2rem = function(d) {
+    var val = parseFloat(d) / this.rem
+    if (typeof d === 'string' && d.match(/px$/)) {
+      val += 'rem'
+    }
+    return val
+  }
+})(window, window['lib'] || (window['lib'] = {}))