Merge branch 'master' of http://192.168.0.115:3000/lanxin/Chengzhebei

public/myData/myData.js

@@ -1814,7 +1814,7 @@ const myDataTemp = {
   // 丧葬因素
   sangzangData: [
     {
-      txt: '程哲碑，其以佛像为主题的造像风格与传统造像碑无二，但传统造像碑通常以发愿文为核心，内容多为祈福禳灾、超度亡灵或祈求功德，不强调墓主生平与家族世系。<br/>程哲碑则强调墓主生平与家族世系，其文字更多是丧葬语境下的内容，其行文与墓志铭密切相关。'
+      txt: '程哲碑，其以佛像为主题的造像风格与传统造像碑无二，但传统造像碑通常以发愿文为核心，内容多为祈福禳灾、超度亡灵或祈求功德，不强调墓主生平与家族世系。程哲碑则强调墓主生平与家族世系，其文字更多是丧葬语境下的内容，其行文与墓志铭密切相关。'
     },
     {
       txt: '碑文详述上党程氏先祖功绩、程哲生平及卒年信息，并以程氏家族三组父子的颂文结尾。虽其“支离杂沓、漫无体裁”，但在这一时期仍符合墓志铭常见“先祖+逝者生卒葬信息+颂文”的基本格式。'
@@ -2047,22 +2047,22 @@ const myDataTemp = {
           img_ac: ['./myData/knowlegeImg/bjzcyczb-bc-smjlmb-2.png'],
           from_ac: '图片来源：《山西大同石家寨北魏司马金龙墓》图7'
         },
-        {
-          name: '染华墓志铭',
-          time: '北魏孝昌二年（526年）',
-          desc: '',
-          img: [],
-          img_ac: ['./myData/knowlegeImg/bjzcyczb-bc-rhmz.jpg'],
-          from_ac: '图片来源：艺术观止微信公众号',
-          from: ''
-        },
-        {
-          name: '胡昭仪墓志铭',
-          time: '（肃宗昭仪胡明相墓志铭   北魏孝昌三年（527年）',
-          desc: '',
-          img: ['./myData/knowlegeImg/bjzcyczb--hzymzm-1.png'],
-          from: '图片来源：镇原县博物馆微信公众号'
-        },
+        // {
+        //   name: '染华墓志铭',
+        //   time: '北魏孝昌二年（526年）',
+        //   desc: '',
+        //   img: [],
+        //   img_ac: ['./myData/knowlegeImg/bjzcyczb-bc-rhmz.jpg'],
+        //   from_ac: '图片来源：艺术观止微信公众号',
+        //   from: ''
+        // },
+        // {
+        //   name: '胡昭仪墓志铭',
+        //   time: '（肃宗昭仪胡明相墓志铭   北魏孝昌三年（527年）',
+        //   desc: '',
+        //   img: ['./myData/knowlegeImg/bjzcyczb--hzymzm-1.png'],
+        //   from: '图片来源：镇原县博物馆微信公众号'
+        // },
         {
           name: '元天穆墓志',
           time: '北魏普泰元年（531年）',
@@ -2073,18 +2073,19 @@ const myDataTemp = {
           ],
           from: '图片来源：艺术观止微信公众号'
         },
-        {
-          name: '冯邕妻元氏墓志',
-          time: '北魏正光三年（522年）',
-          desc: '',
-          from: ''
-        },
-        {
-          name: '元恩墓志铭（《长孙子泽墓志铭》）',
-          time: '北魏永熙三年（534年）',
-          desc: '',
-          from: ''
-        },
+        // {
+        //   name: '冯邕妻元氏墓志',
+        //   time: '北魏正光三年（522年）',
+        //   desc: '',
+        //   from: ''
+        // },
+        // {
+        //   // name: '元恩墓志铭（《长孙子泽墓志铭》）',
+        //   name: '元恩墓志铭',
+        //   time: '北魏永熙三年（534年）',
+        //   desc: '',
+        //   from: ''
+        // },
         {
           name: '元乂墓志铭',
           time: '北魏孝昌二年(526年)',
@@ -2098,13 +2099,13 @@ const myDataTemp = {
           desc: '',
           img: ['./myData/knowlegeImg/bjzcyczb-bc-hgmz.png'],
           from: '图片来源：河南博物院官网'
-        },
-        {
-          name: '元谧墓志',
-          time: '北魏正光五年(524年)',
-          desc: '千唐志斋、碑林博物馆、洛阳博物馆、开封博物馆、于右任、汉魏南北朝墓志集释',
-          from: '图片来源：《北朝墓志英华》张伯龄'
         }
+        // {
+        //   name: '元谧墓志',
+        //   time: '北魏正光五年(524年)',
+        //   desc: '千唐志斋、碑林博物馆、洛阳博物馆、开封博物馆、于右任、汉魏南北朝墓志集释',
+        //   from: '图片来源：《北朝墓志英华》张伯龄'
+        // }
       ]
     }
   ]

public/unityMo/StreamingAssets/Settings.json

@@ -5,16 +5,6 @@
   "panels": [
     {
       "name": "Panel1Camera",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.4,
-          "y": 1
-        }
-      },
       "camera": {
         "position": {
           "x": 0,
@@ -25,6 +15,10 @@
           "x": 0,
           "y": 0,
           "z": 0
+        },
+        "physicalLensShift": {
+          "x": 0.25,
+          "y": 0
         }
       },
       "model": {
@@ -32,27 +26,36 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -4.5,
+          "max": 4.5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     },
     {
       "name": "Panel2Camera",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.5,
-          "y": 1
-        }
-      },
       "camera": {
         "position": {
           "x": 0,
           "y": 0,
           "z": -13
         },
+        "physicalLensShift": {
+          "x": 0.2,
+          "y": 0
+        },
         "rotation": {
           "x": 0,
           "y": 0,
@@ -64,26 +67,35 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     },
     {
       "name": "Panel3Camera",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "camera": {
         "position": {
           "x": 0,
           "y": 0,
-          "z": -10
+          "z": -13
+        },
+        "physicalLensShift": {
+          "x": 0,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -96,27 +108,36 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -10,
+          "max": 10
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     },
     {
       "name": "Panel4Camera",
       "rotationNotAllowed": true,
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.4,
-          "y": 1
-        }
-      },
       "camera": {
         "position": {
           "x": 0,
-          "y": 0,
-          "z": -13
+          "y": 0.5,
+          "z": -12
+        },
+        "physicalLensShift": {
+          "x": 0.2,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -129,26 +150,35 @@
           "x": 0,
           "y": 0,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -4,
+          "max": 4
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     },
     {
       "name": "Panel5Camera",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "camera": {
         "position": {
           "x": 0,
           "y": 0,
-          "z": -15
+          "z": -12
+        },
+        "physicalLensShift": {
+          "x": 0,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -161,6 +191,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -15,
+          "max": 15
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     }
@@ -168,23 +213,17 @@
   "hotspots": [
     {
       "name": "佛龛",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
         "position": {
           "x": 0,
-          "y": 1.5,
-          "z": -8
+          "y": 1.6,
+          "z": -9
+        },
+        "physicalLensShift": {
+          "x": -0.08,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -197,24 +236,33 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -5,
+          "max": 8
         }
       }
     },
     {
       "name": "佛像",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.1,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": 0.8,
@@ -231,24 +279,33 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -5,
+          "max": 8
         }
       }
     },
     {
       "name": "佛龛两侧",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.1,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": 0.8,
@@ -265,24 +322,33 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -5,
+          "max": 8
         }
       }
     },
     {
       "name": "佛龛上部",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.1,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": 3,
@@ -299,27 +365,36 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": 0,
+          "max": 12
         }
       }
     },
     {
       "name": "佛龛下部",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.1,
+          "y": 0
+        },
         "position": {
           "x": 0,
-          "y": -3,
+          "y": -4,
           "z": -8
         },
         "rotation": {
@@ -333,27 +408,36 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -12,
+          "max": -1
         }
       }
     },
     {
       "name": "畏兽",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.08,
+          "y": 0
+        },
         "position": {
           "x": 0,
-          "y": 3,
+          "y": 2.5,
           "z": -8
         },
         "rotation": {
@@ -367,27 +451,36 @@
           "x": 0,
           "y": -90,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -1,
+          "max": 8
         }
       }
     },
     {
       "name": "飞天",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.08,
+          "y": 0
+        },
         "position": {
           "x": 0,
-          "y": 0,
+          "y": -0.5,
           "z": -8
         },
         "rotation": {
@@ -401,24 +494,33 @@
           "x": 0,
           "y": -90,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -6,
+          "max": 5
         }
       }
     },
     {
       "name": "摩尼宝珠",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0.1,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 1,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0.8,
       "startIntensity": 0,
       "camera": {
+        "physicalLensShift": {
+          "x": -0.08,
+          "y": 0
+        },
         "position": {
           "x": 0,
           "y": -3,
@@ -435,6 +537,21 @@
           "x": 0,
           "y": -90,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 3
         }
       }
     }
@@ -442,24 +559,18 @@
   "inscriptions": [
     {
       "name": "碑额",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.4,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0,
       "startIntensity": 0,
       "camera": {
         "position": {
-          "x": 1.4,
-          "y": 4.1,
+          "x": 1.2,
+          "y": 4.3,
           "z": -5
         },
+        "physicalLensShift": {
+          "x": 0.3,
+          "y": 0
+        },
         "rotation": {
           "x": 0,
           "y": 0,
@@ -471,29 +582,38 @@
           "x": 0,
           "y": -90,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -1,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": 2,
+          "max": 15
         }
       }
     },
     {
       "name": "碑文1",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.4,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0,
       "startIntensity": 0,
       "camera": {
         "position": {
           "x": 1.6,
-          "y": 3.4,
+          "y": 2.7,
           "z": -5
         },
+        "physicalLensShift": {
+          "x": 0.25,
+          "y": 0
+        },
         "rotation": {
           "x": 0,
           "y": 0,
@@ -505,28 +625,37 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": 0,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -3,
+          "max": 9
         }
       }
     },
     {
       "name": "碑文2",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.4,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0,
       "startIntensity": 0,
       "camera": {
         "position": {
           "x": 0,
           "y": 0,
-          "z": -13
+          "z": -12
+        },
+        "physicalLensShift": {
+          "x": 0.2,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -539,28 +668,37 @@
           "x": 0,
           "y": 0,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     },
     {
       "name": "碑文3",
-      "dragBlock": {
-        "anchorsMin": {
-          "x": 0,
-          "y": 0
-        },
-        "anchorsMax": {
-          "x": 0.4,
-          "y": 1
-        }
-      },
       "intensityAnimationTime": 0,
       "startIntensity": 0,
       "camera": {
         "position": {
           "x": 0,
           "y": 0,
-          "z": -13
+          "z": -12
+        },
+        "physicalLensShift": {
+          "x": 0.2,
+          "y": 0
         },
         "rotation": {
           "x": 0,
@@ -573,6 +711,25 @@
           "x": 0,
           "y": 0,
           "z": 0
+        },
+        "physicalLensShift": {
+          "x": 0.2,
+          "y": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -10,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     }

public/unityMo/StreamingAssets/aa/catalog.hash

@@ -1 +1 @@
-4c9b429efcfb5761659ecf7b2bc038cd
+59b9c0e674c7fb5acd87333b9a8a4232

public/unityMo/export_drawingBoard.js

@@ -0,0 +1,57 @@
+let saveDom = null;
+let isShowSaveDom = false;
+
+window.onDownload = function (base64string) {
+    if (window.isMobile()){
+        saveDom = document.querySelector('.save-image-background');
+        saveDom.src = 'data:image/png;base64,' + base64string;
+        saveDom.style.pointerEvents = 'auto';
+        isShowSaveDom = true;
+        refreshShareBlockSize();
+    } else {
+        let link = document.createElement('a');
+        link.href = 'data:image/png;base64,' + base64string;
+        link.download = 'image';
+        link.click();
+    }
+}
+
+window.onCancelDownload = function() {
+    if (isShowSaveDom){
+        saveDom.src = '';
+        saveDom.style.pointerEvents = 'none';
+        isShowSaveDom = false;
+    }
+}
+
+window.isMobile = function () {
+    return /(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i.test(navigator.userAgent);
+}
+
+function refreshShareBlockSize() {
+    // Unity画布宽高比
+    let unityCanvasWidth = 1515;
+    let unityCanvaslHeight = 780;
+    let unityPanelWidth = 1150;
+    let unityPanelHeight = 740;
+    let unityPanelOffsetY = 0;
+
+    let innerWidth = window.innerWidth;
+    let innerHeight = window.innerHeight;
+
+    let scale = (unityCanvasWidth / unityPanelHeight) >
+    (innerWidth / innerHeight) ? (innerWidth / unityCanvasWidth) : (innerHeight / unityCanvaslHeight);
+
+    saveDom.style.width = (unityPanelWidth * scale) + 'px';
+    saveDom.style.height = (unityPanelHeight * scale) + 'px';
+
+    if (unityPanelOffsetY > 0){
+        saveDom.style.marginTop = (unityPanelOffsetY * scale * 2) + 'px';
+    } else {
+        saveDom.style.marginBottom = (-unityPanelOffsetY * scale * 2) + 'px';
+    }
+}
+
+window.addEventListener('resize', ()=>{
+    if (isShowSaveDom) refreshShareBlockSize();
+});

public/unityMo/export_main.js

@@ -3,43 +3,44 @@ let isLoadingScene = false
 
 //场景加载进度回调
 window.loadSceneProgress = function (progress) {
-  if (window.parent && window.parent !== window) {
-    window.parent.unityLoading(Math.min(0.99, progress))
-  }
+    if (window.parent && window.parent !== window) {
+        window.parent.unityLoading(Math.min(0.99, progress))
+    }
 }
 
 //场景准备加载回调
 window.startLoadScene = function () {
-  isLoadingScene = true
+    isLoadingScene = true
 }
 
 //场景已完成加载回调
 window.loadedScene = function () {
-  isLoadingScene = false
-
-  if (window.parent && window.parent !== window) {
-    window.parent.unityLoading(1)
-  }
+    isLoadingScene = false
+    if (window.parent && window.parent !== window) {
+        window.parent.unityLoading(1)
+    }
 }
 
 //设置场景加载完毕时透明度渐变的时长(秒), 0为去除该效果
 window.setLoadSceneAnimationTime = function (animationTime) {
-  window.unityInstance.SendMessage('SceneLoader', 'SetAnimationTime', animationTime)
+    window.unityInstance.SendMessage('SceneLoader', 'SetAnimationTime', animationTime)
 }
 
 //切换场景 场景支持以下参数 "TombstoneView" (一单元), "TransitionScene" (空场景), "RoomScene" (碑中世界), "DrawingBoard" (碑影智绘), 切换之前必须判断是否有场景正在加载
 window.loadScene = function (sceneName) {
-  window.setLoadSceneAnimationTime(sceneName === 'DrawingBoard' ? 1 : 0)
-  window.unityInstance.SendMessage('SceneLoader', 'LoadScene', sceneName)
-  currentScene = sceneName
+    window.setLoadSceneAnimationTime(sceneName === 'DrawingBoard' ? 1 : 0)
+    window.unityInstance.SendMessage('SceneLoader', 'LoadScene', sceneName)
+    currentScene = sceneName
+
+    window.onCancelDownload();
 }
 
 //是否正在加载场景
 window.isLoadingScene = function () {
-  return isLoadingScene
+    return isLoadingScene
 }
 
 // 返回当前场景状态
 window.sceneStaRes = function () {
-  return currentScene
+    return currentScene
 }

public/unityMo/index.html

@@ -9,6 +9,7 @@
     <script src="./export_main.js"></script>
     <script src="./export_tombstoneView.js"></script>
     <script src="./export_roomScene.js"></script>
+    <script src="./export_drawingBoard.js"></script>
 </head>
 <body>
     <div id="unity-container">
@@ -19,6 +20,10 @@
             </div>
         </div>
         <div id="unity-warning"></div>
+
+        <div class="save-image-block">
+            <img src="" class="save-image-background" alt="">
+        </div>
     </div>
 </body>
 <script>

public/unityPc/StreamingAssets/Settings.json

@@ -32,6 +32,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -4.5,
+          "max": 4.5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     },
@@ -39,7 +54,7 @@
       "name": "Panel2Camera",
       "dragBlock": {
         "anchorsMin": {
-          "x": 0.1,
+          "x": 0.15,
           "y": 0
         },
         "anchorsMax": {
@@ -64,6 +79,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     },
@@ -96,6 +126,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -10,
+          "max": 10
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     },
@@ -104,11 +149,11 @@
       "rotationNotAllowed": true,
       "dragBlock": {
         "anchorsMin": {
-          "x": 0,
+          "x": 0.15,
           "y": 0
         },
         "anchorsMax": {
-          "x": 0.4,
+          "x": 0.45,
           "y": 1
         }
       },
@@ -129,6 +174,21 @@
           "x": 0,
           "y": 0,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -4,
+          "max": 4
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     },
@@ -161,6 +221,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -15,
+          "max": 15
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     }
@@ -183,7 +258,7 @@
       "camera": {
         "position": {
           "x": 0,
-          "y": 1.5,
+          "y": 2,
           "z": -8
         },
         "rotation": {
@@ -197,6 +272,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -5,
+          "max": 8
         }
       }
     },
@@ -231,6 +321,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -5,
+          "max": 8
         }
       }
     },
@@ -265,6 +370,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -5,
+          "max": 8
         }
       }
     },
@@ -299,6 +419,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": 0,
+          "max": 12
         }
       }
     },
@@ -319,7 +454,7 @@
       "camera": {
         "position": {
           "x": 0,
-          "y": -3,
+          "y": -4,
           "z": -8
         },
         "rotation": {
@@ -333,6 +468,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -12,
+          "max": -1
         }
       }
     },
@@ -353,7 +503,7 @@
       "camera": {
         "position": {
           "x": 0,
-          "y": 3,
+          "y": 2.5,
           "z": -8
         },
         "rotation": {
@@ -367,6 +517,21 @@
           "x": 0,
           "y": -90,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -1,
+          "max": 8
         }
       }
     },
@@ -387,7 +552,7 @@
       "camera": {
         "position": {
           "x": 0,
-          "y": 0,
+          "y": -0.5,
           "z": -8
         },
         "rotation": {
@@ -401,6 +566,21 @@
           "x": 0,
           "y": -90,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -6,
+          "max": 5
         }
       }
     },
@@ -435,6 +615,21 @@
           "x": 0,
           "y": -90,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 3
         }
       }
     }
@@ -448,7 +643,7 @@
           "y": 0
         },
         "anchorsMax": {
-          "x": 0.4,
+          "x": 0.45,
           "y": 1
         }
       },
@@ -471,6 +666,21 @@
           "x": 0,
           "y": -90,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -1,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": 2,
+          "max": 15
         }
       }
     },
@@ -482,7 +692,7 @@
           "y": 0
         },
         "anchorsMax": {
-          "x": 0.4,
+          "x": 0.45,
           "y": 1
         }
       },
@@ -505,6 +715,21 @@
           "x": 0,
           "y": -180,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": 0,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -3,
+          "max": 9
         }
       }
     },
@@ -516,7 +741,7 @@
           "y": 0
         },
         "anchorsMax": {
-          "x": 0.4,
+          "x": 0.45,
           "y": 1
         }
       },
@@ -539,6 +764,21 @@
           "x": 0,
           "y": 0,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -5,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     },
@@ -550,7 +790,7 @@
           "y": 0
         },
         "anchorsMax": {
-          "x": 0.4,
+          "x": 0.45,
           "y": 1
         }
       },
@@ -573,6 +813,21 @@
           "x": 0,
           "y": 0,
           "z": 0
+        },
+        "limitScale": {
+          "isLimit": true,
+          "min": 0.2,
+          "max": 1.5
+        },
+        "limitX": {
+          "isLimit": true,
+          "min": -10,
+          "max": 5
+        },
+        "limitY": {
+          "isLimit": true,
+          "min": -8,
+          "max": 8
         }
       }
     }

public/unityPc/export_main.js

@@ -3,43 +3,42 @@ let isLoadingScene = false
 
 //场景加载进度回调
 window.loadSceneProgress = function (progress) {
-  if (window.parent && window.parent !== window) {
-    window.parent.unityLoading(Math.min(0.99, progress))
-  }
+    if (window.parent && window.parent !== window) {
+        window.parent.unityLoading(Math.min(0.99, progress))
+    }
 }
 
 //场景准备加载回调
 window.startLoadScene = function () {
-  isLoadingScene = true
+    isLoadingScene = true
 }
 
 //场景已完成加载回调
 window.loadedScene = function () {
-  isLoadingScene = false
-
-  if (window.parent && window.parent !== window) {
-    window.parent.unityLoading(1)
-  }
+    isLoadingScene = false
+    if (window.parent && window.parent !== window) {
+        window.parent.unityLoading(1)
+    }
 }
 
 //设置场景加载完毕时透明度渐变的时长(秒), 0为去除该效果
 window.setLoadSceneAnimationTime = function (animationTime) {
-  window.unityInstance.SendMessage('SceneLoader', 'SetAnimationTime', animationTime)
+    window.unityInstance.SendMessage('SceneLoader', 'SetAnimationTime', animationTime)
 }
 
 //切换场景 场景支持以下参数 "TombstoneView" (一单元), "TransitionScene" (空场景), "RoomScene" (碑中世界), "DrawingBoard" (碑影智绘), 切换之前必须判断是否有场景正在加载
 window.loadScene = function (sceneName) {
-  window.setLoadSceneAnimationTime(sceneName === 'DrawingBoard' ? 1 : 0)
-  window.unityInstance.SendMessage('SceneLoader', 'LoadScene', sceneName)
-  currentScene = sceneName
+    window.setLoadSceneAnimationTime(sceneName === 'DrawingBoard' ? 1 : 0)
+    window.unityInstance.SendMessage('SceneLoader', 'LoadScene', sceneName)
+    currentScene = sceneName
 }
 
 //是否正在加载场景
 window.isLoadingScene = function () {
-  return isLoadingScene
+    return isLoadingScene
 }
 
 // 返回当前场景状态
 window.sceneStaRes = function () {
-  return currentScene
+    return currentScene
 }

src/App.tsx

@@ -30,6 +30,7 @@ const A6_2_zxzgh = React.lazy(() => import('./pages/A6ybwx/A6_2_zxzgh'))
 // 墓影智慧
 const A8byzh = React.lazy(() => import('./pages/A8byzh'))
 const A9knowlege = React.lazy(() => import('./pages/A9knowlege'))
+const text = React.lazy(() => import('./pages/Ztext'))
 
 declare global {
   //设置全局属性
@@ -244,97 +245,237 @@ export default function App() {
           callIframeFu(
             'refreshAppSettings',
             JSON.stringify({
+              cameraDefaultBlendTime: 0.8,
+              modelAutoRotationAnimationTime: 0.8,
+              modelControlAnimationTime: 0.8,
               panels: [
                 {
-                  name: 'DefaultVirtualCamera',
-                  cameraOrthographicSize: 9,
-                  viewportX: 0,
-                  offset: -10,
-                  model: {
+                  name: 'Panel1Camera',
+                  camera: {
+                    position: {
+                      x: 0,
+                      y: 0,
+                      z: -13
+                    },
                     rotation: {
                       x: 0,
-                      y: -180,
+                      y: 0,
                       z: 0
+                    },
+                    physicalLensShift: {
+                      x: 0.25,
+                      y: 0
                     }
-                  }
-                },
-                {
-                  name: 'Panel1Camera',
-                  cameraOrthographicSize: 4,
-                  viewportX: 0.5,
-                  offset: -10,
+                  },
                   model: {
                     rotation: {
                       x: 0,
                       y: -180,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -4.5,
+                      max: 4.5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -8,
+                      max: 8
                     }
                   }
                 },
                 {
                   name: 'Panel2Camera',
-                  cameraOrthographicSize: 9,
-                  viewportX: 0,
-                  offset: -10,
+                  camera: {
+                    position: {
+                      x: 0,
+                      y: 0,
+                      z: -13
+                    },
+                    physicalLensShift: {
+                      x: 0.2,
+                      y: 0
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
+                    }
+                  },
                   model: {
                     rotation: {
                       x: 0,
                       y: -180,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -5,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -8,
+                      max: 8
                     }
                   }
                 },
                 {
                   name: 'Panel3Camera',
-                  cameraOrthographicSize: 9,
-                  viewportX: 0,
-                  offset: -10,
+                  camera: {
+                    position: {
+                      x: 0,
+                      y: 0,
+                      z: -13
+                    },
+                    physicalLensShift: {
+                      x: 0,
+                      y: 0
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
+                    }
+                  },
                   model: {
                     rotation: {
                       x: 0,
                       y: -180,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -10,
+                      max: 10
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -8,
+                      max: 8
                     }
                   }
                 },
                 {
                   name: 'Panel4Camera',
-                  cameraOrthographicSize: 9,
-                  viewportX: 0,
-                  offset: -10,
+                  rotationNotAllowed: true,
+                  camera: {
+                    position: {
+                      x: 0,
+                      y: 0.5,
+                      z: -12
+                    },
+                    physicalLensShift: {
+                      x: 0.2,
+                      y: 0
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
+                    }
+                  },
                   model: {
                     rotation: {
                       x: 0,
                       y: 0,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -4,
+                      max: 4
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -8,
+                      max: 8
                     }
                   }
                 },
                 {
                   name: 'Panel5Camera',
-                  cameraOrthographicSize: 9,
-                  viewportX: 0.5,
-                  offset: 0,
+                  camera: {
+                    position: {
+                      x: 0,
+                      y: 0,
+                      z: -12
+                    },
+                    physicalLensShift: {
+                      x: 0,
+                      y: 0
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
+                    }
+                  },
                   model: {
                     rotation: {
                       x: 0,
                       y: -180,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -15,
+                      max: 15
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -8,
+                      max: 8
                     }
-                  },
-                  rotationNotAllowed: true
+                  }
                 }
               ],
               hotspots: [
                 {
                   name: '佛龛',
+                  intensityAnimationTime: 0.8,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
                     position: {
-                      y: 1.1,
-                      z: -50
+                      x: 0,
+                      y: 1.6,
+                      z: -9
+                    },
+
+                    physicalLensShift: {
+                      x: -0.08,
+                      y: 0
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
                     }
                   },
                   model: {
@@ -342,18 +483,42 @@ export default function App() {
                       x: 0,
                       y: -180,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -5,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -5,
+                      max: 8
                     }
                   }
                 },
                 {
                   name: '佛像',
+                  intensityAnimationTime: 0.8,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
+                    physicalLensShift: {
+                      x: -0.1,
+                      y: 0
+                    },
                     position: {
+                      x: 0,
+                      y: 0.8,
+                      z: -8
+                    },
+                    rotation: {
+                      x: 0,
                       y: 0,
-                      z: -50
+                      z: 0
                     }
                   },
                   model: {
@@ -361,18 +526,42 @@ export default function App() {
                       x: 0,
                       y: -180,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -5,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -5,
+                      max: 8
                     }
                   }
                 },
                 {
                   name: '佛龛两侧',
+                  intensityAnimationTime: 0.8,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
+                    physicalLensShift: {
+                      x: -0.1,
+                      y: 0
+                    },
                     position: {
+                      x: 0,
+                      y: 0.8,
+                      z: -8
+                    },
+                    rotation: {
+                      x: 0,
                       y: 0,
-                      z: -50
+                      z: 0
                     }
                   },
                   model: {
@@ -380,18 +569,42 @@ export default function App() {
                       x: 0,
                       y: -180,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -5,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -5,
+                      max: 8
                     }
                   }
                 },
                 {
                   name: '佛龛上部',
+                  intensityAnimationTime: 0.8,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
+                    physicalLensShift: {
+                      x: -0.1,
+                      y: 0
+                    },
                     position: {
-                      y: 2,
-                      z: -50
+                      x: 0,
+                      y: 3,
+                      z: -8
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
                     }
                   },
                   model: {
@@ -399,18 +612,42 @@ export default function App() {
                       x: 0,
                       y: -180,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -5,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: 0,
+                      max: 12
                     }
                   }
                 },
                 {
                   name: '佛龛下部',
+                  intensityAnimationTime: 0.8,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
+                    physicalLensShift: {
+                      x: -0.1,
+                      y: 0
+                    },
                     position: {
-                      y: -1,
-                      z: -50
+                      x: 0,
+                      y: -4,
+                      z: -8
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
                     }
                   },
                   model: {
@@ -418,18 +655,42 @@ export default function App() {
                       x: 0,
                       y: -180,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -5,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -12,
+                      max: -1
                     }
                   }
                 },
                 {
                   name: '畏兽',
+                  intensityAnimationTime: 0.8,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
+                    physicalLensShift: {
+                      x: -0.08,
+                      y: 0
+                    },
                     position: {
-                      y: 2,
-                      z: -50
+                      x: 0,
+                      y: 2.5,
+                      z: -8
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
                     }
                   },
                   model: {
@@ -437,18 +698,42 @@ export default function App() {
                       x: 0,
                       y: -90,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -5,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -1,
+                      max: 8
                     }
                   }
                 },
                 {
                   name: '飞天',
+                  intensityAnimationTime: 0.8,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
+                    physicalLensShift: {
+                      x: -0.08,
+                      y: 0
+                    },
                     position: {
+                      x: 0,
+                      y: -0.5,
+                      z: -8
+                    },
+                    rotation: {
+                      x: 0,
                       y: 0,
-                      z: -50
+                      z: 0
                     }
                   },
                   model: {
@@ -456,18 +741,42 @@ export default function App() {
                       x: 0,
                       y: -90,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -5,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -6,
+                      max: 5
                     }
                   }
                 },
                 {
                   name: '摩尼宝珠',
+                  intensityAnimationTime: 0.8,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 5,
-                    viewportX: 0.5,
-                    offset: 0,
+                    physicalLensShift: {
+                      x: -0.08,
+                      y: 0
+                    },
                     position: {
-                      y: -1,
-                      z: -50
+                      x: 0,
+                      y: -3,
+                      z: -8
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
                     }
                   },
                   model: {
@@ -475,6 +784,21 @@ export default function App() {
                       x: 0,
                       y: -90,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -5,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -8,
+                      max: 3
                     }
                   }
                 }
@@ -482,51 +806,108 @@ export default function App() {
               inscriptions: [
                 {
                   name: '碑额',
+                  intensityAnimationTime: 0,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 2,
-                    viewportX: 0,
-                    offset: 0,
                     position: {
-                      y: 4.4,
-                      z: -50
+                      x: 1.2,
+                      y: 4.3,
+                      z: -5
+                    },
+                    physicalLensShift: {
+                      x: 0.3,
+                      y: 0
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
                     }
                   },
                   model: {
                     rotation: {
                       x: 0,
-                      y: 0,
+                      y: -90,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -1,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: 2,
+                      max: 15
                     }
                   }
                 },
                 {
                   name: '碑文1',
+                  intensityAnimationTime: 0,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 2,
-                    viewportX: 0,
-                    offset: 0,
                     position: {
-                      y: 3.6,
-                      z: -50
+                      x: 1.6,
+                      y: 2.7,
+                      z: -5
+                    },
+                    physicalLensShift: {
+                      x: 0.25,
+                      y: 0
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
                     }
                   },
                   model: {
                     rotation: {
                       x: 0,
-                      y: 0,
+                      y: -180,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: 0,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -3,
+                      max: 9
                     }
                   }
                 },
                 {
                   name: '碑文2',
+                  intensityAnimationTime: 0,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 9,
-                    viewportX: 0,
-                    offset: -10,
                     position: {
+                      x: 0,
+                      y: 0,
+                      z: -12
+                    },
+                    physicalLensShift: {
+                      x: 0.2,
+                      y: 0
+                    },
+                    rotation: {
+                      x: 0,
                       y: 0,
-                      z: -50
+                      z: 0
                     }
                   },
                   model: {
@@ -534,18 +915,42 @@ export default function App() {
                       x: 0,
                       y: 0,
                       z: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -5,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -8,
+                      max: 8
                     }
                   }
                 },
                 {
                   name: '碑文3',
+                  intensityAnimationTime: 0,
+                  startIntensity: 0,
                   camera: {
-                    cameraOrthographicSize: 9,
-                    viewportX: 0,
-                    offset: -10,
                     position: {
+                      x: 0,
                       y: 0,
-                      z: -50
+                      z: -12
+                    },
+                    physicalLensShift: {
+                      x: 0.2,
+                      y: 0
+                    },
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
                     }
                   },
                   model: {
@@ -553,6 +958,25 @@ export default function App() {
                       x: 0,
                       y: 0,
                       z: 0
+                    },
+                    physicalLensShift: {
+                      x: 0.2,
+                      y: 0
+                    },
+                    limitScale: {
+                      isLimit: true,
+                      min: 0.2,
+                      max: 1.5
+                    },
+                    limitX: {
+                      isLimit: true,
+                      min: -10,
+                      max: 5
+                    },
+                    limitY: {
+                      isLimit: true,
+                      min: -8,
+                      max: 8
                     }
                   }
                 }
@@ -583,6 +1007,7 @@ export default function App() {
             <Route path='/sinicize' component={A6_2_zxzgh} exact />
             <Route path='/byzh' component={A8byzh} exact />
             <Route path='/knowlege' component={A9knowlege} exact />
+            <Route path='/text' component={text} exact />
             <Route path='*' component={NotFound} />
           </Switch>
         </React.Suspense>

src/components/Zback/index.tsx

@@ -11,7 +11,7 @@ function Zback({ clickFu }: Props) {
   const { myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   return (
-    <div className={styles.Zback} onClick={clickFu}>
+    <div className={styles.Zback} onClick={clickFu} id='Zback'>
       <img
         className='backImg'
         src={require(`@/assets/img/btn_back${myLangue === 'EN' ? 'En' : ''}.png`)}

src/pages/A0base/index.module.scss

@@ -22,6 +22,8 @@
       align-items: center;
 
       .content {
+        position: relative;
+        top: -20px;
         width: 68%;
         height: 100%;
         display: flex;
@@ -190,12 +192,12 @@
       color: #b1967b;
       cursor: pointer;
 
-      & > img {
+      &>img {
         width: 44px;
         object-fit: contain;
       }
 
-      & > .guideVideoTitle {
+      &>.guideVideoTitle {
         height: 12px;
         line-height: 8px;
         font-weight: 500;
@@ -203,6 +205,27 @@
         font-size: 14px;
       }
     }
+
+    // 先导视频
+    .xiandaoBox {
+      background-color: black;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 20;
+
+      video {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 90%;
+        height: 90%;
+        object-fit: contain;
+      }
+    }
   }
 }
 
@@ -268,4 +291,4 @@
       }
     }
   }
-}
+}

src/pages/A0base/index.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
-import { Toast } from 'antd-mobile'
 import { cutUnityFu, unityShow } from './data'
 import Zloding from '@/components/Zloding'
 import { toEchPageFu } from '@/components/MenuSider/data'
+import Zclose from '@/components/Zclose'
 
 function A0base() {
   const [loding, setLoding] = useState(false)
@@ -30,6 +30,17 @@ function A0base() {
     window.location.replace(path)
   }
 
+  const xianDaoRef = useRef<HTMLVideoElement>(null)
+  const [xianDao, setXianDao] = useState(false)
+
+  useEffect(() => {
+    if (xianDao) {
+      setTimeout(() => {
+        if (xianDaoRef.current) xianDaoRef.current.play()
+      }, 200)
+    }
+  }, [xianDao])
+
   return (
     <div className={classNames(myLangue === 'ZH' ? '' : styles.A0baseEn, styles.A0base)}>
       <Zloding isShow={loding} bacNum={1} />
@@ -104,17 +115,29 @@ function A0base() {
       </div>
 
       {/* 先导片 */}
-      <div
-        className='guideVideo'
-        onClick={() => {
-          Toast.show({
-            content: '正在开发中'
-          })
-        }}
-      >
+      <div className='guideVideo' onClick={() => setXianDao(true)}>
         <img src={require('@/assets/img/guideVideo.png')} alt='' />
         <div className='guideVideoTitle'>{myLangue === 'EN' ? 'PromotionalVideo' : '先导片'}</div>
       </div>
+
+      {/* 先导片播放 */}
+      {xianDao ? (
+        <div className='xiandaoBox'>
+          <video
+            ref={xianDaoRef}
+            playsInline
+            muted={false}
+            webkit-playsinline='true'
+            x5-video-player-type='h5'
+            // controls={true}
+          >
+            <source type='video/mp4' src={'./myData/xianDao.mp4'} />
+            Your browser does not support the video tag.
+          </video>
+
+          <Zclose clickFu={() => setXianDao(false)} />
+        </div>
+      ) : null}
     </div>
   )
 }

src/pages/A2yblm/components/ModalTxt/index.module.scss

@@ -106,7 +106,7 @@
         }
 
         .tab0 {
-          width: 84px;
+          width: 88px;
         }
 
         .tab1 {
@@ -257,7 +257,7 @@
 
         .text {
           width: 400px;
-          line-height: 24px;
+          line-height: 28px;
           font-size: 16px;
           text-align: justify;
           letter-spacing: 2px;

src/pages/A2yblm/components/ModalTxt/index.tsx

@@ -17,14 +17,14 @@ type Props = {
 }
 
 function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, ref: any) {
-  const { myData,myLangue } = useSelector((state: RootState) => state.A0Layout)
+  const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   const [selectedTab, setSelectedTab] = useState(0)
   const selectedTabRef = useRef(0)
 
-  useEffect(()=>{
-    selectedTabRef.current=selectedTab
-  },[selectedTab])
+  useEffect(() => {
+    selectedTabRef.current = selectedTab
+  }, [selectedTab])
 
   const sonSetStaFu = useCallback(() => {
     setSelectedTab(0)
@@ -322,28 +322,32 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
     callIframeFu('showInscription', 0)
   }
 
-  const handleTabClick = useCallback((tabIndex: number, txt: string) => {
-    let index = tabIndex
+  const handleTabClick = useCallback(
+    (tabIndex: number, txt: string) => {
+      let index = tabIndex
 
-    const flag = selectedTabRef.current === index
+      const flag = selectedTabRef.current === index
 
-    if (flag) index = 0
-    setBottomTxt(flag ? '' : txt)
-    setSelectedTab(index)
-    callIframeFu('showInscription', index === 0 ? -1 : index)
+      if (flag) index = 0
+      setBottomTxt(flag ? '' : txt)
+      setSelectedTab(index)
+      callIframeFu('showInscription', index === 0 ? -1 : index)
 
-    if (index === 0) setIsShowMzmTitle(false)
-  }
-,[setBottomTxt, setIsShowMzmTitle])
+      if (index === 0) setIsShowMzmTitle(false)
+    },
+    [setBottomTxt, setIsShowMzmTitle]
+  )
   return (
-    <div className={classNames(styles.modalTxt, myLangue==='ZH' ? '' : styles.modalTxtEn)} id='modalTxt'>
+    <div
+      className={classNames(styles.modalTxt, myLangue === 'ZH' ? '' : styles.modalTxtEn)}
+      id='modalTxt'
+    >
       <div className='modalTxtContainner'>
         <div className='topBar'>
           <div className='beie' hidden={selectedTab !== 0}>
             <img src={require('@/assets/img/beie.png')} alt='' />
-            <div className='txt' onClick={handleBeie}>
-              {myLangue==='EN'?'forehead':'碑额'}
-              
+            <div className='txt songFont' onClick={handleBeie}>
+              {myLangue === 'EN' ? 'forehead' : '碑额'}
             </div>
           </div>
 
@@ -359,14 +363,14 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
                 }.png`)}
                 alt=''
               />
-              <div className={`tabNub ${selectedTab === item.key ? 'tabNubAc' : ''}`}>
+              <div className={`tabNub songFont ${selectedTab === item.key ? 'tabNubAc' : ''}`}>
                 {item.sonTxt}
               </div>
               <div
-                className={classNames('txt',selectedTab === item.key ? 'txtAc' : '')}
+                className={classNames('txt songFont', selectedTab === item.key ? 'txtAc' : '')}
                 style={{ opacity: selectedTab === item.key || selectedTab === 0 ? '1' : '0' }}
               >
-                {myLangue==='EN'?item.nameEn: item.name}
+                {myLangue === 'EN' ? item.nameEn : item.name}
               </div>
             </div>
           ))}
@@ -408,13 +412,27 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
 
         {selectedTab === 0 && (
           <div className='content'>
-            <div className='title songFontc'>{myLangue==='EN'?'Overview of the Inscription':'碑文概述'}</div>
+            <div className='title songFontc'>
+              {myLangue === 'EN' ? 'Overview of the Inscription' : '碑文概述'}
+            </div>
             <div className='text'>
-             {myLangue==='EN'?'The inscription on the Cheng Zhe Stele consists of 31 lines of regular script,':'程哲碑碑文，'}
-            <br />{myLangue==='EN'?'with 45 characters per line at maximum. ':'31行楷书，满行45字，'}
-            <br /> {myLangue==='EN'?' The characters are approximately 2 cm in size, set within square grids, totaling 1,404 characters.':'字径约2厘米，带方界格，总计1404字；'}
-            <br /> {myLangue==='EN'?'No formal title of the stele is engraved. ':'未刻正式碑名。 '}<br />
-            {myLangue==='EN'?'The entire text praises the historical achievements of the Cheng family.':'通篇颂德程氏家族的历史功绩。'}
+              {myLangue === 'EN'
+                ? 'The inscription on the Cheng Zhe Stele consists of 31 lines of regular script,'
+                : '程哲碑碑文，'}
+              <br />
+              {myLangue === 'EN'
+                ? 'with 45 characters per line at maximum. '
+                : '31行楷书，满行45字，'}
+              <br />{' '}
+              {myLangue === 'EN'
+                ? ' The characters are approximately 2 cm in size, set within square grids, totaling 1,404 characters.'
+                : '字径约2厘米，带方界格，总计1404字；'}
+              <br />{' '}
+              {myLangue === 'EN' ? 'No formal title of the stele is engraved. ' : '未刻正式碑名。 '}
+              <br />
+              {myLangue === 'EN'
+                ? 'The entire text praises the historical achievements of the Cheng family.'
+                : '通篇颂德程氏家族的历史功绩。'}
             </div>
           </div>
         )}

src/pages/A2yblm/index.module.scss

@@ -23,7 +23,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: url(../../assets/img/btn_tab.png) no-repeat center center;
+        background: url(../../assets/sgImg/Component.png) no-repeat center center;
         background-size: 100% 100%;
         text-align: center;
         line-height: 15px;
@@ -37,9 +37,9 @@
       }
 
       .tab_active {
-        background: url(../../assets/img/btn_tabAc.png) no-repeat center center;
+        background: url(../../assets/sgImg/ComponentAc.png) no-repeat center center;
         background-size: 100% 100%;
-        color: rgba(166, 118, 67, 1);
+        color: #7C4B36;
       }
     }
 
@@ -332,7 +332,8 @@
           max-width: 100%;
         }
       }
-      .content>div{
+
+      .content>div {
         letter-spacing: 0;
         text-align: start;
       }

src/pages/A3beie/index.module.scss

@@ -29,6 +29,7 @@
           position: relative;
           font-size: 24px;
           letter-spacing: 3px;
+          text-shadow: 1px 1px 1px #945b46;
 
           .butterflyR {
             width: 20px;
@@ -45,9 +46,12 @@
         }
 
         .text {
-          font-size: 18px;
-          line-height: 30px;
+          width: 400px;
+          line-height: 28px;
+          font-size: 16px;
+          text-align: justify;
           letter-spacing: 2px;
+          color: #504e40;
         }
       }
     }

src/pages/A6ybwx/Sangzang/components/Policy/index.module.scss

@@ -11,19 +11,9 @@
   overflow: hidden;
 
   :global {
-    .back {
-      width: 80px;
-      height: 40px;
-      position: absolute;
-      z-index: 3;
-      top: 3%;
-      left: 4%;
-      cursor: pointer;
 
-      &>img {
-        height: 100%;
-        object-fit: fill;
-      }
+    #Zback {
+      left: 3%;
     }
 
     .containner {
@@ -33,6 +23,7 @@
       width: 100%;
       height: 102%;
       overflow: auto;
+
       // overflow-y: hidden;
       // overflow-y: hidden;
       &::-webkit-scrollbar {
@@ -93,10 +84,12 @@
           // display: flex;
           display: inline-block;
 
+
           .part1,
           .part2 {
+            position: relative;
             display: inline-block;
-            padding: 35px 20px;
+            padding: 35px 20px 45px;
             width: 340px;
             height: 100%;
             overflow: auto;
@@ -108,6 +101,20 @@
             white-space: normal;
             transition: width 0.6s ease-in-out, padding 0.86s ease-in-out, opacity 0.3s ease-in-out;
 
+            &::before {
+              content: '';
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              width: 100%;
+              height: 40%;
+              pointer-events: none;
+              z-index: 1;
+              // background-image: url('../../../../../assets/sgImg/mask.png');
+              // background-size: 100% 100%;
+              background: linear-gradient(to top, rgba(255, 255, 255, 1), 20%, rgba(255, 255, 255, 0));
+            }
+
             &::-webkit-scrollbar {
               width: 0;
               height: 0;
@@ -117,10 +124,11 @@
           .part1 {
             background: url(../../../../../assets/img/A6_policy_part_bg1.png) no-repeat center center;
             background-size: 100% 100%;
+            padding-bottom: 60px;
 
-            .part1txt {
+            .part1Box {
               width: 100%;
-              height: 80%;
+              height: 100%;
               overflow: auto;
 
               &::-webkit-scrollbar {
@@ -129,19 +137,28 @@
               }
             }
 
+            .part1txt {
+              width: 100%;
+              text-align: justify;
+
+              // overflow: auto;
+
+              // &::-webkit-scrollbar {
+              //   width: 0;
+              //   height: 0;
+              // }
+            }
+
             .from {
               width: 100%;
-              height: fit-content;
-              max-height: 20%;
-              overflow: auto;
               color: rgba(124, 75, 54, 1);
               font-size: 14px;
               line-height: 16px;
 
-              &::-webkit-scrollbar {
-                width: 0;
-                height: 0;
-              }
+              // &::-webkit-scrollbar {
+              //   width: 0;
+              //   height: 0;
+              // }
 
               .fromtxt {
                 width: 100%;
@@ -171,10 +188,16 @@
               display: flex;
               flex-direction: column;
               justify-content: space-between;
+              text-align: center;
 
               &>img {
                 height: 78%;
+                max-width: 50%;
                 object-fit: contain;
+                position: relative;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
               }
 
               .from {
@@ -183,20 +206,24 @@
                 width: 100%;
                 font-size: 14px;
                 line-height: 16px;
-                color: rgba(124, 75, 54, 0.7);
+                color: #908c7b;
+                padding-top: 15px;
               }
 
               .name,
               .time {
                 writing-mode: vertical-lr;
                 position: absolute;
-                right: 15%;
+                right: 18%;
                 top: 50%;
                 transform: translateY(-80%);
                 width: 20px;
                 text-align: center;
                 font-size: 22px;
-                height: 50%;
+                min-height: 52%;
+                height: auto;
+                max-height: 200%;
+                color: #5e3422;
               }
 
               .changeBar {
@@ -210,7 +237,7 @@
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                gap: 10px;
+                gap: 20px;
 
                 .yuan,
                 .ta {
@@ -236,14 +263,15 @@
 
                 .cActive {
                   opacity: 1;
+                  color: #7c4b36;
                 }
               }
 
               .time {
-                right: 0;
-                font-size: 16px;
+                right: 10px;
+                font-size: 14px;
                 width: 40px;
-                text-align: left;
+                // text-align: left;
                 line-height: 20px;
               }
             }
@@ -255,6 +283,8 @@
               height: 20%;
               white-space: normal;
               overflow: auto;
+              text-align: justify;
+              font-size: 15px;
 
               &::-webkit-scrollbar {
                 width: 0;
@@ -295,6 +325,11 @@
           text-align: center;
           letter-spacing: 1px;
           color: rgba(69, 68, 55, 1);
+          font-weight: 700;
+        }
+
+        .txtAc {
+          color: #7c4b36;
         }
 
         &>img {
@@ -312,12 +347,13 @@
         height: 2px;
         display: flex;
         align-items: center;
-        background: linear-gradient(90deg,
-            rgba(93, 96, 96, 0.2) 0%,
-            rgba(93, 96, 96, 1) 50%,
-            rgba(93, 96, 96, 0.2) 100%);
-        background-size: 5px 2px;
-        background-repeat: repeat-x;
+        background-image: url('../../../../../assets/sgImg/line.png');
+        background-size: 100% 2px;
+        background-repeat: no-repeat;
+        background-position: center center;
+
+        // background-size: 5px 2px;
+        // background-repeat: repeat-x;
       }
     }
   }

src/pages/A6ybwx/Sangzang/components/Policy/index.tsx

@@ -2,13 +2,18 @@ import React, { useState, useRef, useEffect } from 'react'
 import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
+import classNames from 'classnames'
+import Zback from '@/components/Zback'
+
 function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
   const [currentItem, setCurrentItem] = useState(1)
 
   const originRef = useRef<HTMLDivElement>(null)
   const itemRef = useRef<HTMLDivElement>(null)
   const { myData } = useSelector((state: RootState) => state.A0Layout)
-  const [isOriStates, setIsOriStates] = useState(myData.policy[0].part2.map((item) => item.img ? true : false))
+  const [isOriStates, setIsOriStates] = useState(
+    myData.policy[0].part2.map(item => (item.img ? true : false))
+  )
 
   // 切换tab的时候重置为原碑
   useEffect(() => {
@@ -51,9 +56,8 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
 
   return (
     <div className={styles.Policy}>
-      <div className='back' onClick={() => setShowTab(0)}>
-        <img src={require('@/assets/img/btn_back.png')} alt='' />
-      </div>
+      <Zback clickFu={() => setShowTab(0)} />
+
       <div className='containner' ref={originRef} onWheel={handleWheel}>
         <div className='containner2'>
           {myData.policy.map((item, index) => (
@@ -63,40 +67,27 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                 <div className='bottom'>
                   <img src={item.bottomPic} alt='' />
                 </div>
-
               </div>
               <div className={`historyDetail ${currentItem !== 0 ? '' : 'historyDetail_hide'}`}>
                 <>
-                  <div
-                    className='part1'
-                    style={partChangeCss(index)}
-                  >
-                    <div className='part1txt'>{item.part1.txt} </div>
-                    <div className='from'>
-                      <div className='fromtxt'>{item.part1.from} </div>
-                      <div className='author'>{item.part1.author}</div>
+                  <div className='part1' style={partChangeCss(index)}>
+                    <div className='part1Box'>
+                      <div className='part1txt'>{item.part1.txt} </div>
+                      <div className='from'>
+                        <div className='fromtxt'>{item.part1.from} </div>
+                        <div className='author'>{item.part1.author}</div>
+                      </div>
                     </div>
                   </div>
                   {item.part2.map((part2Item, part2Index) => (
-                    <div
-                      className='part2'
-                      style={partChangeCss(index)}
-                      key={part2Item.name}
-                    >
+                    <div className='part2' style={partChangeCss(index)} key={part2Item.name}>
                       <div className='imgBox'>
-                        <img
-                          src={part2Src(part2Item, part2Index)}
-                          alt=''
-                        />
+                        <img src={part2Src(part2Item, part2Index)} alt='' />
                         <div className='from'>
                           {isOriStates[part2Index] ? part2Item.from : part2Item.from_ac}
                         </div>
-                        <div className='name'>
-                          {part2Item.name}
-                        </div>
-                        <div className='time'>
-                          {part2Item.time}
-                        </div>
+                        <div className='name songFont'>{part2Item.name}</div>
+                        <div className='time songFont'>{part2Item.time}</div>
                         <div className='changeBar'>
                           <div
                             className={`yuan ${isOriStates[part2Index] ? 'cActive' : ''}`}
@@ -108,7 +99,7 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                             }
                           >
                             原碑
-                            <img src={require('@/assets/img/A6_policy_btn.png')} alt='' />
+                            <img src={require('@/assets/sgImg/btn_active.png')} alt='' />
                           </div>
                           <div
                             className={`ta ${!isOriStates[part2Index] ? 'cActive' : ''}`}
@@ -120,7 +111,7 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                             }
                           >
                             拓片
-                            <img src={require('@/assets/img/A6_policy_btn.png')} alt='' />
+                            <img src={require('@/assets/sgImg/btn_normal.png')} alt='' />
                           </div>
                         </div>
                       </div>
@@ -136,10 +127,14 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
       <div className='timeLine'>
         <div className='lineContainner' />
         {myData.policy.map((item, index) => (
-          <div className='dot' key={item.title} onClick={()=>setCurrentItem(index+1)}>
-            <div className='txt'>{item.title}</div>
+          <div className='dot' key={item.title} onClick={() => setCurrentItem(index + 1)}>
+            <div className={classNames('txt', currentItem - 1 === index ? 'txtAc' : '')}>
+              {item.title}
+            </div>
             <img
-              src={require(`@/assets/img/A7base3_icon${currentItem - 1 === index ? 'A' : '_n'}.png`)}
+              src={require(`@/assets/img/A7base3_icon${
+                currentItem - 1 === index ? 'A' : '_n'
+              }.png`)}
               alt=''
             />
           </div>

src/pages/A6ybwx/Sangzang/components/Sangzangys/index.module.scss

@@ -11,6 +11,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
+
   :global {
     .main {
       position: relative;
@@ -21,11 +22,11 @@
       justify-content: center;
       gap: 20px;
       transition: all 0.6s ease-in-out;
+
       .lHidding {
         width: 300px;
         height: 100%;
-        background: url('../../../../../assets/img/A6_sangzang_hidContent.png') no-repeat center
-          center;
+        background: url('../../../../../assets/img/A6_sangzang_hidContent.png') no-repeat center center;
         background-size: 100% 100%;
         position: absolute;
         z-index: 1;
@@ -36,18 +37,19 @@
         align-items: center;
         justify-content: flex-end;
         transition: all 0.6s ease-in-out;
+
         .lHidding_left {
           position: absolute;
           left: 0;
           transform: translateX(-239px);
-          width: 525px;
+          width: 520px;
           height: 100%;
           display: flex;
           align-items: center;
-          background: url('../../../../../assets/img/A6_sangzang_hidding_left.png') no-repeat center
-            center;
+          background: url('../../../../../assets/img/A6_sangzang_hidding_left.png') no-repeat center center;
           background-size: 100% 100%;
           transition: all 0.6s ease-in-out;
+
           .detail_info1 {
             width: 300px;
             height: 100%;
@@ -57,18 +59,20 @@
             justify-content: center;
             gap: 10px;
             transition: all 0.6s ease-in-out;
+
             .imgBox {
               position: relative;
               width: 80%;
-              height: 50%;
+              height: 60%;
+
               .pic {
                 width: 100%;
                 height: 100%;
-                background: url('../../../../../assets/img/A6_sangzang_yp.png') no-repeat center
-                  center;
+                background: url('../../../../../assets/img/A6_sangzang_yp.png') no-repeat center center;
                 background-size: contain;
               }
             }
+
             .txt,
             .title,
             .time {
@@ -77,25 +81,32 @@
               font-size: 16px;
               line-height: 24px;
               font-weight: 400;
-              color: rgba(69, 68, 55, 1);
+              color: #9d9a90;
+
               text-align: center;
             }
+
             .txt {
               line-height: 16px;
-              font-size: 15px;
+              font-size: 14px;
               height: 40px;
-              color: rgba(69, 68, 55, 0.8);
+              color: #9d9a90;
+              position: relative;
+              top: -8px;
             }
+
             .title {
               height: 16px;
               color: rgba(124, 75, 54, 1);
-              font-size: 25px;
+              font-size: 24px;
               letter-spacing: 1px;
             }
+
             .time {
               color: rgba(175, 135, 100, 1);
             }
           }
+
           .detail_info2 {
             width: calc(100% - 330px);
             height: 74%;
@@ -103,12 +114,14 @@
             flex-direction: column;
             gap: 10px;
             transition: all 0.6s ease-in-out;
+
             .title_info2 {
               width: fit-content;
               position: relative;
               height: 60px;
               font-size: 26px;
               color: rgba(124, 75, 54, 1);
+
               &::after {
                 content: '';
                 position: absolute;
@@ -116,20 +129,23 @@
                 left: 0;
                 width: 100%;
                 height: 10px;
-                background: url('../../../../../assets/img/A6_sinicize_line2.png') no-repeat center
-                  center;
+                background: url('../../../../../assets/img/A6_sinicize_line2.png') no-repeat center center;
                 background-size: 100% 100%;
               }
             }
+
             .txt_info2 {
-              width: 100%;
-              height: 80%;
+              padding-top: 25px;
+              width: 90%;
+              height: 100%;
               font-size: 16px;
               line-height: 24px;
               letter-spacing: 1px;
               font-weight: 400;
               color: #504e40;
               overflow: auto;
+              text-align: justify;
+
               &::-webkit-scrollbar {
                 width: 0;
                 height: 0;
@@ -137,6 +153,7 @@
             }
           }
         }
+
         .lHidding_right {
           width: 300px;
           height: 100%;
@@ -154,13 +171,14 @@
             position: relative;
             width: 75%;
             height: 60%;
+
             .pic {
               width: 100%;
               height: 100%;
-              background: url('../../../../../assets/img/A6_sangzang_yp2.png') no-repeat center
-                center;
+              background: url('../../../../../assets/img/A6_sangzang_yp2.png') no-repeat center center;
               background-size: contain;
             }
+
             .zoomIn {
               width: 30px;
               height: 30px;
@@ -171,13 +189,14 @@
               justify-content: center;
               align-items: center;
 
-              & > img {
+              &>img {
                 height: 20px;
                 width: 20px;
                 object-fit: contain;
               }
             }
           }
+
           .txt,
           .title,
           .time {
@@ -189,22 +208,28 @@
             color: rgba(69, 68, 55, 1);
             text-align: center;
           }
+
           .txt {
+            position: relative;
+            top: -8px;
             line-height: 16px;
-            font-size: 15px;
-            height: 30px;
-            color: rgba(69, 68, 55, 0.8);
+            font-size: 13px;
+            color: #9d9a90;
+            margin-bottom: 8px;
           }
+
           .title {
             height: 16px;
             color: rgba(124, 75, 54, 1);
-            font-size: 25px;
+            font-size: 24px;
             letter-spacing: 1px;
           }
+
           .time {
             color: rgba(175, 135, 100, 1);
           }
         }
+
         .open {
           position: absolute;
           top: 50%;
@@ -219,8 +244,7 @@
 
           .openPic {
             opacity: 0;
-            background: url('../../../../../assets/img/A6_sangzang_hidRight.png') no-repeat center
-              center;
+            background: url('../../../../../assets/img/A6_sangzang_hidRight.png') no-repeat center center;
             background-size: 100% 100%;
             height: 100%;
             width: 100%;
@@ -228,6 +252,7 @@
           }
         }
       }
+
       .left {
         width: 250px;
         height: 100%;
@@ -236,12 +261,15 @@
         justify-content: flex-end;
         transition: all 0.3s ease-in-out;
         position: relative;
+
         .pic {
           width: 84%;
           height: 90%;
           background-size: contain;
           transition: all 0.3s ease-in-out;
+
         }
+
         .operate {
           opacity: 0;
           pointer-events: none;
@@ -258,21 +286,25 @@
           text-align: center;
           gap: 6px;
           padding-bottom: 50px;
-          font-size: 22px;
+          font-size: 20px;
           color: rgba(255, 233, 182, 1);
           cursor: pointer;
+
+
           .beiwen1 {
             width: 25%;
             height: 100%;
             line-height: 47px;
             writing-mode: vertical-rl;
           }
+
           .beiwen2 {
             width: 18%;
             height: 100%;
             line-height: 37px;
             writing-mode: vertical-rl;
           }
+
           .beiwen3 {
             width: 37%;
             height: 100%;
@@ -281,41 +313,46 @@
           }
         }
       }
+
       .right {
+        margin-left: 5%;
         width: 50%;
         height: 60%;
         display: flex;
         justify-content: space-between;
         align-items: center;
         transition: all 0.3s ease-in-out;
+
         .content {
-          width: 68%;
+          width: 90%;
           height: 100%;
           display: flex;
           flex-direction: column;
           gap: 10px;
           transition: all 0.3s ease-in-out;
           position: relative;
+
           .title {
             width: 100%;
             font-size: 26px;
             max-width: 100%;
             font-size: 26px;
             color: #fff;
-            border-bottom: 1px solid rgba(93, 96, 96, 0.4);
+            // border-bottom: 1px solid rgba(93, 96, 96, 0.4);
           }
 
           .text {
-            width: 90%;
-            height: fit-content;
+            width: 70%;
+            height: auto;
             max-height: 190px;
             font-size: 16px;
-            line-height: 24px;
-            letter-spacing: 2px;
+            line-height: 28px;
+            // letter-spacing: 1px;
             color: #504e40;
             text-align: justify;
             font-weight: 400;
             overflow: auto;
+
             &::-webkit-scrollbar {
               width: 0px;
               height: 0px;
@@ -324,21 +361,22 @@
 
           .btn {
             font-size: 14px;
-            color: rgba(93, 96, 96, 1);
+            color: #7c4b36;
             cursor: pointer;
-            width: 80%;
+            width: 60%;
             height: 50px;
             position: absolute;
             bottom: -45px;
-            left: 50%;
-            transform: translateX(-63%);
+            left: -3%;
+
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 20px;
             line-height: 50px;
             cursor: pointer;
-            & > img {
+
+            &>img {
               height: 90%;
               position: absolute;
               z-index: -1;
@@ -351,26 +389,31 @@
         }
       }
     }
+
     .mainAc {
       width: 100%;
       justify-content: flex-end;
       gap: 0;
+
       .lHidding {
         width: 66%;
         transform: translate(-3%, -50%);
+
         .lHidding_left {
           transform: translateX(0);
         }
+
         .open {
           right: -2%;
+
           .openPic {
-            background: url('../../../../../assets/img/A6_sangzang_hidLeft.png') no-repeat center
-              center;
+            background: url('../../../../../assets/img/A6_sangzang_hidLeft.png') no-repeat center center;
             background-size: 100% 100%;
             animation: opacityChange 3s infinite ease-in-out;
           }
         }
       }
+
       .showRight {
         width: 97%;
 
@@ -380,14 +423,17 @@
           pointer-events: auto;
         }
       }
+
       .left {
         .pic {
           width: 100%;
         }
       }
+
       .right {
         width: 0;
         opacity: 0;
+
         .content {
           width: 85%;
         }
@@ -400,38 +446,47 @@
     .mainShow_tab3,
     .mainShow_tab4 {
       padding-left: 190px;
+
       .lHidding {
         width: 330px;
         transform: translate(-7%, -50%);
-        background: url('../../../../../assets/img/A6_sangzang_hidContent_r.png') no-repeat center
-          center;
+        background: url('../../../../../assets/img/A6_sangzang_hidContent_r.png') no-repeat center center;
         background-size: 100% 100%;
+
         .lHidding_left {
           display: none;
         }
+
         .lHidding_right {
           width: 330px;
           opacity: 1;
           pointer-events: auto;
         }
+
         .open {
           opacity: 0;
           pointer-events: none;
         }
       }
+
       .left {
         transition: all 0.6s ease-in-out;
       }
+
       .right {
         width: 39%;
+        margin-left: 0;
         transition: all 0.6s ease-in-out;
+
         .title {
           display: none;
         }
+
         .content {
           width: 92%;
           transition: all 0.6s ease-in-out;
         }
+
         .btn {
           opacity: 0;
           pointer-events: none;
@@ -440,12 +495,13 @@
     }
 
     .mainShow_tab1 {
+      padding-left: 230px;
+
       .lHidding {
         .lHidding_right {
           .imgBox {
             .pic {
-              background: url('../../../../../assets/img/A6_sangzang_tab1.png') no-repeat center
-                center;
+              background: url('../../../../../assets/img/A6_sangzang_tab1.png') no-repeat center center;
               background-size: 100% 100%;
             }
           }
@@ -458,16 +514,36 @@
           pointer-events: auto;
         }
       }
+
+      .right {
+        height: 100%;
+
+        .content {
+          margin-top: 5%;
+          height: 90%;
+          padding-left: 15px;
+
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          .text {
+            height: 80%;
+            max-height: 80%;
+            line-height: 26px;
+          }
+        }
+      }
     }
 
     .mainShow_tab2 {
       padding-left: 140px;
+
       .lHidding {
         .lHidding_right {
           .imgBox {
             .pic {
-              background: url('../../../../../assets/img/A6_sangzang_tab2.png') no-repeat center
-                center;
+              background: url('../../../../../assets/img/A6_sangzang_tab2.png') no-repeat center center;
               background-size: 100% 100%;
             }
           }
@@ -476,6 +552,7 @@
 
       .left {
         width: 300px;
+
         .pic {
           right: 21%;
           top: 23%;
@@ -487,18 +564,42 @@
           background-size: cover;
         }
       }
+
+      .right {
+        height: 100%;
+
+        .content {
+          margin-top: 5%;
+          height: 90%;
+          padding-left: 15px;
+
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          .text {
+            width: 80%;
+            height: 90%;
+            max-height: 90%;
+            line-height: 26px;
+          }
+        }
+      }
     }
 
     .mainShow_tab3,
     .mainShow_tab4 {
       .lHidding {
         transform: translate(-88%, -50%);
+
         .lHidding_right {
           width: 330px;
         }
       }
+
       .left {
         width: 300px;
+
         .pic {
           right: 23%;
           top: 14%;
@@ -510,10 +611,26 @@
           background-size: cover;
         }
       }
+
       .right {
-        width: 50%;
+        height: 100%;
+
         .content {
-          width: 75%;
+          margin-top: 5%;
+          height: 90%;
+          padding-left: 15px;
+
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          .text {
+            padding-top: 50px;
+            width: 70%;
+            height: 90%;
+            max-height: 90%;
+            line-height: 26px;
+          }
         }
       }
     }
@@ -526,6 +643,18 @@
           transform: scale(3.4);
         }
       }
+
+      .right {
+
+        .content {
+
+
+          .text {
+            padding-top: 0px;
+
+          }
+        }
+      }
     }
 
     .back {
@@ -537,14 +666,15 @@
       left: 4%;
       cursor: pointer;
 
-      & > img {
+      &>img {
         height: 100%;
         object-fit: fill;
       }
     }
+
     .A6_tabBar {
       width: 50px;
-      height: 260px;
+      // height: 260px;
       display: flex;
       align-items: center;
       flex-direction: column;
@@ -560,7 +690,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: url(../../../../../assets/img/btn_tab.png) no-repeat center center;
+        background-image: url('../../../../../assets/sgImg/Component.png');
         background-size: 100% 100%;
         width: 60px;
         height: 60px;
@@ -568,18 +698,17 @@
         text-align: center;
         line-height: 15px;
         letter-spacing: 1px;
-        font-size: 12px;
         font-weight: 500;
         color: #fbebbd;
         cursor: pointer;
       }
 
       .tab_active {
-        background: url(../../../../../assets/img/btn_tabAc.png) no-repeat center center;
-        background-size: 100% 100%;
+        background-image: url('../../../../../assets/sgImg/ComponentAc.png');
         color: rgba(166, 118, 67, 1);
       }
     }
+
     .A6_tabBar_hide {
       opacity: 0;
       pointer-events: none;
@@ -600,30 +729,36 @@
       padding: 0 20px;
       align-items: center;
       transition: all 0.3s ease-in-out;
+
       .geshi_left {
         width: 45%;
         height: 100%;
         display: flex;
         justify-content: flex-end;
         align-items: center;
+
         .pic {
           width: 80%;
           height: 95%;
           background-size: contain;
         }
       }
+
       .geshi_right {
         width: 55%;
         height: 100%;
         display: flex;
         flex-direction: column;
-        gap: 20px;
+        padding-top: 10px;
+
         .top {
           width: 100%;
           height: 90px;
           display: flex;
           align-items: center;
           gap: 80px;
+          margin-bottom: 10px;
+
           .tab0,
           .tab1,
           .tab2 {
@@ -637,7 +772,7 @@
             cursor: pointer;
             position: relative;
 
-            & > img {
+            &>img {
               width: 60px;
               object-fit: cover;
             }
@@ -665,11 +800,13 @@
               width: 200%;
               font-weight: 700;
             }
+
             .txtAc {
               opacity: 0.4;
             }
           }
         }
+
         .content {
           width: 95%;
           height: 68%;
@@ -679,6 +816,8 @@
           font-weight: 400;
           color: rgba(69, 68, 55, 1);
           overflow: auto;
+          text-align: justify;
+
           &::-webkit-scrollbar {
             width: 0px;
             height: 0px;
@@ -686,6 +825,7 @@
         }
       }
     }
+
     .geshiHide {
       opacity: 0;
       pointer-events: none;
@@ -698,7 +838,7 @@
       width: 100%;
       height: 100%;
       position: absolute;
-      z-index: 1;
+      z-index: 4;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
@@ -708,6 +848,7 @@
       padding: 6px 20px;
       align-items: center;
       gap: 10px;
+
       .mzwHotL {
         width: 37%;
         height: 100%;
@@ -715,14 +856,16 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
         .mPic {
           padding: 6px 10px;
-          width: 90%;
-          height: 98%;
+          width: 100%;
+          height: 100%;
           background: url(../../../../../assets/img/A6_sangzang_tab1.png) no-repeat center center;
           background-size: 100% 100%;
         }
       }
+
       .mzwHotR {
         padding-top: 10px;
         width: 60%;
@@ -730,43 +873,51 @@
         display: flex;
         flex-direction: column;
         gap: 10px;
+
         .mtitle,
         .mtext {
           font-size: 16px;
           line-height: 24px;
-          letter-spacing: 2px;
+          // letter-spacing: 2px;
+          text-align: justify;
           font-weight: 400;
           color: rgba(255, 233, 182, 1);
         }
+
         .mtitle {
           padding: 20px 0;
-          font-size: 20px;
+          font-size: 24px;
           width: 100%;
           height: 50px;
         }
+
         .mtext {
           width: 100%;
           height: fit-content;
           max-height: 80%;
           color: rgba(255, 255, 255, 1);
           overflow: auto;
+
           &::-webkit-scrollbar {
             width: 0px;
             height: 0px;
           }
         }
       }
+
       .mzwclose {
         width: 70px;
         height: 50px;
         position: absolute;
-        top: 14px;
-        right: 63px;
-        & > img {
+        top: 21px;
+        right: 32px;
+
+        &>img {
           width: 100%;
           height: 100%;
           object-fit: contain;
         }
+
         cursor: pointer;
       }
     }
@@ -776,4 +927,4 @@
       pointer-events: auto;
     }
   }
-}
+}

src/pages/A6ybwx/Sangzang/components/Sangzangys/index.tsx

@@ -2,13 +2,13 @@ import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
-
+import Zback from '@/components/Zback'
 
 function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
   const [currentTab, setCurrentTab] = useState('tab0')
   const [isShowTabBar, setIsShowTabBar] = useState(true)
   const [isShowHidContent, setIsShowHidContent] = useState(false)
-  const [isShowHidContentRight, setIsShowHidContentRight] = useState(false)
+  const [isShowHidContentRight, setIsShowHidContentRight] = useState(true)
   const [isShowMzwHot, setIsShowMzwHot] = useState(false)
   const [selectedGeshi, setSelectedGeshi] = useState(0)
   const { myData } = useSelector((state: RootState) => state.A0Layout)
@@ -26,15 +26,11 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
   useEffect(() => {
     if (selectedGeshi !== 0) {
       setIsShowTabBar(false)
-    }
-    else {
+    } else {
       setIsShowTabBar(true)
     }
-
   }, [selectedGeshi])
 
-
-
   const handleTabClick = (tab: string) => {
     if (tab === currentTab) {
       setCurrentTab('tab0')
@@ -47,12 +43,17 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
 
   return (
     <div className={styles.sang}>
-      <div className='back' onClick={() => setShowTab(0)}>
-        <img src={require('@/assets/img/btn_back.png')} alt='' />
-      </div>
+      <Zback
+        clickFu={() => {
+          if (selectedGeshi !== 0) setSelectedGeshi(0)
+          else setShowTab(0)
+        }}
+      />
+
       <div
-        className={`main ${isShowHidContent ? 'mainAc' : currentTab === 'tab0' ? '' : 'mainShow_' + currentTab
-          }`}
+        className={`main ${
+          isShowHidContent ? 'mainAc' : currentTab === 'tab0' ? '' : 'mainShow_' + currentTab
+        }`}
       >
         <div className={`lHidding ${isShowHidContentRight ? 'showRight' : ''}`}>
           <div className='lHidding_left'>
@@ -60,13 +61,18 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
               <div className='imgBox'>
                 <div className='pic' ref={picRef} />
               </div>
-              <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[0].from }} >
-              </div>
-              <div className='title'>{myData.sangzangLeftInfo2[0].name}</div>
+              <div
+                className='txt'
+                dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[0].from }}
+              ></div>
+              <div className='title songFont'>{myData.sangzangLeftInfo2[0].name}</div>
               <div className='time'>{myData.sangzangLeftInfo2[0].txt}</div>
             </div>
-            <div className='detail_info2' onClick={() => setIsShowHidContentRight(!isShowHidContentRight)}>
-              <div className='title_info2'>{myData.sangzangStatic.leftInfoName}</div>
+            <div
+              className='detail_info2'
+              // onClick={() => setIsShowHidContentRight(!isShowHidContentRight)}
+            >
+              {/* <div className='title_info2 songFont'>{myData.sangzangStatic.leftInfoName}</div> */}
               <div className='txt_info2'>{myData.sangzangStatic.txt}</div>
             </div>
           </div>
@@ -77,9 +83,11 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
                 <img src={require('@/assets/img/A6_sangzang_zoomin.png')} alt='' />
               </div>
             </div>
-            <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[1].from }} >
-            </div>
-            <div className='title'>{myData.sangzangLeftInfo2[1].name}</div>
+            <div
+              className='txt'
+              dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[1].from }}
+            ></div>
+            <div className='title songFont'>{myData.sangzangLeftInfo2[1].name}</div>
             <div className='time'>{myData.sangzangLeftInfo2[1].txt}</div>
           </div>
           <div
@@ -87,28 +95,50 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
             onClick={e => {
               e.stopPropagation()
               setIsShowHidContent(false)
-              setIsShowHidContentRight(false)
+              // setIsShowHidContentRight(false)
             }}
           >
             <div className='openPic' />
           </div>
         </div>
         <div className='left'>
-          <div className='pic' style={{
-            background: `url(${require(`@/assets/img/A6_sangzang_left_${currentTab}.png`)}) no-repeat center/contain`
-          }} />
+          <div
+            className='pic'
+            style={{
+              background: `url(${require(`@/assets/img/A6_sangzang_left_${currentTab}.png`)}) no-repeat center/contain`
+            }}
+          />
           <div className='operate'>
-            <div className='beiwen1' onClick={() => setSelectedGeshi(1)}>程氏颂文</div>
-            <div className='beiwen2' onClick={() => setSelectedGeshi(2)}>程哲生卒</div>
-            <div className='beiwen3' onClick={() => setSelectedGeshi(3)}>先祖功绩</div>
+            <div className='beiwen1 songFont' onClick={() => setSelectedGeshi(3)}>
+              程氏颂文
+            </div>
+            <div className='beiwen2 songFont' onClick={() => setSelectedGeshi(2)}>
+              程哲生卒
+            </div>
+            <div className='beiwen3 songFont' onClick={() => setSelectedGeshi(1)}>
+              先祖功绩
+            </div>
           </div>
         </div>
-        <div className='right'>
+        <div
+          className='right'
+          style={
+            {
+              // width: currentTab === 'tab0' ? '45%' : '50%',
+              // marginLeft: currentTab === 'tab0' ? '5%' : '0'
+            }
+          }
+        >
           <div className={`content`}>
-            <div className='title myFont'>{myData.sangzangStatic.rightInfoName}</div>
-            <div className='text' dangerouslySetInnerHTML={{ __html: myData.sangzangData[Number(currentTab.split('tab')[1])].txt }} />
-            <div className="btn" onClick={() => setIsShowHidContent(true)}>
-              <img src={require('@/assets/img/A6_sangzang_btn2.png')} alt="" />
+            <div className='title songFont'>{myData.sangzangStatic.rightInfoName}</div>
+            <div
+              className='text'
+              dangerouslySetInnerHTML={{
+                __html: myData.sangzangData[Number(currentTab.split('tab')[1])].txt
+              }}
+            />
+            <div className='btn songFont' onClick={() => setIsShowHidContent(true)}>
+              <img src={require('@/assets/img/A6_sangzang_btn2.png')} alt='' />
               传统造像碑文
             </div>
           </div>
@@ -116,7 +146,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
       </div>
       <div className={`A6_tabBar ${!isShowTabBar ? 'A6_tabBar_hide' : ''}`}>
         <div
-          className={`tab ${currentTab === 'tab1' ? 'tab_active' : ''}`}
+          className={`tab songFont ${currentTab === 'tab1' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab1')}
         >
           墓志
@@ -124,7 +154,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           格式
         </div>
         <div
-          className={`tab ${currentTab === 'tab2' ? 'tab_active' : ''}`}
+          className={`tab songFont ${currentTab === 'tab2' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab2')}
         >
           攀附
@@ -132,7 +162,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           之风
         </div>
         <div
-          className={`tab ${currentTab === 'tab3' ? 'tab_active' : ''}`}
+          className={`tab songFont ${currentTab === 'tab3' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab3')}
         >
           立碑
@@ -140,7 +170,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           动机
         </div>
         <div
-          className={`tab ${currentTab === 'tab4' ? 'tab_active' : ''}`}
+          className={`tab songFont ${currentTab === 'tab4' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab4')}
         >
           刻写
@@ -154,53 +184,89 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
         <div className='back' onClick={() => setSelectedGeshi(0)}>
           <img src={require('@/assets/img/btn_back.png')} alt='' />
         </div>
-        <div className="geshi_left">
-          <div className="pic" style={{
-            background: `url(${require(`@/assets/img/A6_sangzang_geshi${selectedGeshi === 0 ? '1' : selectedGeshi}.png`)}) no-repeat center/contain`
-          }} />
+        <div className='geshi_left'>
+          <div
+            className='pic'
+            style={{
+              background: `url(${require(`@/assets/img/A6_sangzang_geshi${
+                selectedGeshi === 0 ? '1' : selectedGeshi
+              }.png`)}) no-repeat center/contain`
+            }}
+          />
         </div>
-        <div className="geshi_right">
-          <div className="top">
+        <div className='geshi_right'>
+          <div className='top'>
             {myData.mzgeshi.map((item, index) => (
-              <div key={item.key} className={`tab${index}`} onClick={(e) => {
-                e.stopPropagation()
-                setSelectedGeshi(item.key)
-              }}>
+              <div
+                key={item.key}
+                className={`tab${index}`}
+                onClick={e => {
+                  e.stopPropagation()
+                  setSelectedGeshi(item.key)
+                }}
+              >
                 <img
-                  src={require(`@/assets/img/btn_ModalTxt_bg${selectedGeshi === item.key ? '_ac' : ''
-                    }.png`)}
+                  src={require(`@/assets/img/btn_ModalTxt_bg${
+                    selectedGeshi === item.key ? '_ac' : ''
+                  }.png`)}
                   alt=''
                 />
-                <div className={`tabNub ${selectedGeshi === item.key ? 'tabNubAc' : ''}`}>
+                <div className={`tabNub songFont ${selectedGeshi === item.key ? 'tabNubAc' : ''}`}>
                   {item.sonTxt}
                 </div>
-                <div
-                  className={`txt ${selectedGeshi !== item.key ? 'txtAc' : ''}`}
-
-                >
+                <div className={`txt songFont ${selectedGeshi !== item.key ? 'txtAc' : ''}`}>
                   {item.name}
                 </div>
               </div>
             ))}
-
           </div>
-          <div className="content" dangerouslySetInnerHTML={{ __html: selectedGeshi !== 0 ? myData.mzgeshi[selectedGeshi - 1].txt : '' }}></div>
+          <div
+            className='content'
+            dangerouslySetInnerHTML={{
+              __html: selectedGeshi !== 0 ? myData.mzgeshi[selectedGeshi - 1].txt : ''
+            }}
+          ></div>
         </div>
       </div>
 
       {/* 墓志文 */}
-      <div className={`mzwHot ${isShowMzwHot ? 'mzwHot_show' : ''}`} >
-        <div className="mzwHotL"><div className="mPic" style={{
-          background: `url(${require(`@/assets/img/A6_sangzang_${(currentTab !== 'tab1' && currentTab !== 'tab2') ? 'yp2' : currentTab}.png`)}) no-repeat center/contain`
-        }}></div></div>
-        <div className="mzwHotR">
-          <div className="mtitle">{myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1])].title}</div>
-          <div className="mtext" dangerouslySetInnerHTML={{ __html: myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1])].txt }}></div>
+      <div className={`mzwHot ${isShowMzwHot ? 'mzwHot_show' : ''}`}>
+        <div className='mzwHotL'>
+          <div
+            className='mPic'
+            style={{
+              background: `url(${require(`@/assets/img/A6_sangzang_${
+                currentTab !== 'tab1' && currentTab !== 'tab2' ? 'yp2' : currentTab
+              }.png`)}) no-repeat center/contain`
+            }}
+          ></div>
+        </div>
+        <div className='mzwHotR'>
+          <div className='mtitle songFont'>
+            {
+              myData.mzw[
+                currentTab !== 'tab1' && currentTab !== 'tab2'
+                  ? 0
+                  : Number(currentTab.split('tab')[1])
+              ].title
+            }
+          </div>
+          <div
+            className='mtext'
+            dangerouslySetInnerHTML={{
+              __html:
+                myData.mzw[
+                  currentTab !== 'tab1' && currentTab !== 'tab2'
+                    ? 0
+                    : Number(currentTab.split('tab')[1])
+                ].txt
+            }}
+          ></div>
+        </div>
+        <div className='mzwclose' onClick={() => setIsShowMzwHot(false)}>
+          <img src={require('@/assets/img/closeWithTxt.png')} alt='' />
         </div>
-        <div className="mzwclose" onClick={() => setIsShowMzwHot(false)}><img src={require('@/assets/img/closeWithTxt.png')} alt="" /></div>
       </div>
-
-
     </div>
   )
 }

src/pages/A7wjwj/conponents/Shuxing/index.module.scss

@@ -18,7 +18,7 @@
         width: 100%;
         height: fit-content;
         font-size: 14px;
-        font-weight: 500;
+        // font-weight: 500;
         color: #7e807d;
         font-size: 16px;
         line-height: 22px;
@@ -71,7 +71,7 @@
           .time {
             font-size: 14px;
             font-weight: 400;
-            color: rgba(91, 71, 46, 0.8);
+            color: #a59a8a;
           }
         }
       }

src/pages/A7wjwj/index.tsx

@@ -9,8 +9,7 @@ import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 
 function A7Wjwj() {
-
-  const {myData} = useSelector((state: RootState) => state.A0Layout)
+  const { myData } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentTab, setCurrentTab] = useState(0)
 
@@ -29,21 +28,33 @@ function A7Wjwj() {
       {/* 属性之辨 */}
       <Shuxing ref={tab2Ref} style={{ display: currentTab === 1 ? 'flex' : 'none' }} />
       {/* 未解之思 */}
-      <div className='weijie' dangerouslySetInnerHTML={{__html:myData.weijie}} style={{ display: currentTab === 2 ? 'flex' : 'none' }}>
-      </div>
+      <div
+        className='weijie'
+        dangerouslySetInnerHTML={{ __html: myData.weijie }}
+        style={{ display: currentTab === 2 ? 'flex' : 'none' }}
+      ></div>
 
       <div className={classNames('back', isPc ? '' : 'moBack')} onClick={() => gotoBack()}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
 
       <div className='topBar'>
-        <div className={`tab ${currentTab === 0 ? 'active' : ''}`} onClick={() => setCurrentTab(0)}>
+        <div
+          className={`tab songFont ${currentTab === 0 ? 'active' : ''}`}
+          onClick={() => setCurrentTab(0)}
+        >
           发现之谜
         </div>
-        <div className={`tab ${currentTab === 1 ? 'active' : ''}`} onClick={() => setCurrentTab(1)}>
+        <div
+          className={`tab songFont ${currentTab === 1 ? 'active' : ''}`}
+          onClick={() => setCurrentTab(1)}
+        >
           属性之辨
         </div>
-        <div className={`tab ${currentTab === 2 ? 'active' : ''}`} onClick={() => setCurrentTab(2)}>
+        <div
+          className={`tab songFont ${currentTab === 2 ? 'active' : ''}`}
+          onClick={() => setCurrentTab(2)}
+        >
           未解之思
         </div>
       </div>

src/pages/Ztext/index.module.scss

@@ -0,0 +1,4 @@
+.AAAAA {
+  :global {
+  }
+}

src/pages/Ztext/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import styles from './index.module.scss'
+import SangzangHome from '../A6ybwx/Sangzang'
+function AAAAA() {
+  return (
+    <div className={styles.AAAAA}>
+      <SangzangHome setGotoTab={() => {}} />
+    </div>
+  )
+}
+
+const MemoAAAAA = React.memo(AAAAA)
+
+export default MemoAAAAA