feat: 添加源码

src/App.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="wrap" ref="wrap" id="wrap">
+    <div class="ScaleBox" ref="ScaleBox">
+      <!-- <img :src="require(`./assets/${pubBgc}`)" alt="" /> -->
+      <ai-action
+        ref="AiRef"
+        v-show="!noNeedAiPath.includes($route.path)"
+        class="ai-class"
+      />
+      <router-view v-if="isRouterAlive" />
+      <!-- <div class="top" id="top">
+        <div v-for="(item, index) in routerList" :key="index">
+          <router-link :to="item.path">{{ item.name }}</router-link
+          >&nbsp;
+        </div>
+      </div> -->
+    </div>
+    <websocket />
+    <waves />
+    <!-- 背景音乐 -->
+    <background-audio ref="backgroundAudioRef" />
+    <!-- 按钮点击触发音效 -->
+    <button-audio />
+    <!-- 无操作则跳转回首页，且模式置为普通模式 -->
+    <mouse-check />
+    <!-- <float-icon /> -->
+    <transition name="fade">
+      <svg-icon
+        icon-class="show-speak"
+        className="show-speak"
+        v-show="showBottom"
+      />
+    </transition>
+  </div>
+</template>
+
+<script>
+import websocket from "@/components/Websocket/websocket.vue";
+import { routerList } from "@/utils/util";
+import { operate } from "@/utils/intent-operate";
+import waves from "@/views/home/waves";
+import MouseCheck from "@/components/MouseCheck/MouseCheck.vue";
+import BackgroundAudio from "@/components/Audio/BackgroundAudio.vue";
+import ButtonAudio from "@/components/Audio/ButtonAudio.vue";
+import { mapState } from "vuex";
+import AiAction from "@/components/AiAction/AiAction.vue";
+import { changeSystemMode } from "@/api/system";
+
+// import FloatIcon from "@/components/FloatIcon/FloatIcon.vue";
+export default {
+  name: "ScaleBox",
+  provide() {
+    return {
+      reload: this.reload,
+    };
+  },
+  components: {
+    websocket,
+    waves,
+    MouseCheck,
+    BackgroundAudio,
+    ButtonAudio,
+    AiAction,
+  },
+  data() {
+    return {
+      showBottom: false,
+      scale: null,
+      // width: 1920,
+      // height: 818,
+      // heightValue: 818,
+      // widthValue: 1920,
+      routerList,
+      text: "",
+      isRouterAlive: true,
+      noNeedAiPath: ["/group-photo", "/photo-preview"], //不需要AI的页面
+    };
+  },
+  computed: {
+    pathAndTurn() {
+      return {
+        turn: this.routerTurnAnimate,
+        path: this.$route.path,
+      };
+    },
+    ...mapState({
+      pubBgc: (state) => state.publicData.pubBgc,
+      showBottomMic: (state) => state.publicData.showBottomMic,
+      routerTurnAnimate: (state) => state.publicData.routerTurnAnimate,
+    }),
+  },
+  watch: {
+    pathAndTurn: {
+      handler(val) {
+        this.$store.commit("setRankingShow", true);
+        if (val.path === "/sub/book-ranking") {
+          this.$store.commit("setRankingShow", false);
+          if (!val.turn) {
+            this.$store.commit("setRankingShow", true);
+          }
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    showBottomMic(val) {
+      this.showBottom = val || false;
+      console.log("拾音框变化",val);
+    },
+  },
+  mounted() {
+    this.$store.commit("setPageOverAi", false);
+    this.$store.commit("setRouterTurnAnimate", false);
+    this.$store.commit("setShowBottomMic", false);
+    this.$store.commit("setInstruct", "");
+    this.$store.commit("initInstructData", "");
+    this.$store.commit("setRankingShow", true);
+    // //初始化state里的数据
+    // this.$store.commit("initPublicData", "");
+    // this.$store.commit("initInstructData", "");
+    //默认加载普通模式
+    this.changeSystemMode();
+    this.inintButton();
+    setTimeout(() => {
+      this.$refs.backgroundAudioRef.playMusic();
+    }, 2000);
+  },
+  methods: {
+    changeSystemMode() {
+      changeSystemMode({ systemMode: 0 }).then((res) => {
+        console.log("切换为普通模式");
+        this.$store.commit("setCurrentSystemMode", 0);
+      });
+    },
+    inintButton() {
+      // 禁用双指缩放
+      document.documentElement.addEventListener(
+        "touchstart",
+        function (event) {
+          if (event.touches.length > 1) {
+            event.preventDefault();
+          }
+        },
+        {
+          passive: false,
+        }
+      );
+      var lastTouchEnd = 0;
+      document.documentElement.addEventListener(
+        "touchend",
+        function (event) {
+          var now = Date.now();
+          if (now - lastTouchEnd <= 300) {
+            event.preventDefault();
+          }
+          lastTouchEnd = now;
+        },
+        {
+          passive: false,
+        }
+      );
+      // 禁止右键
+      document.addEventListener("contextmenu", function (e) {
+        e.preventDefault();
+      });
+      // 禁止F12快捷键
+      document.onkeydown = function (e) {
+        if (e.which === 123 || e.key === "F12" || e.key === "Inspect") {
+          e.preventDefault();
+        }
+      };
+    },
+    //路由重新加载
+    reload() {
+      this.isRouterAlive = false;
+      this.$nextTick(function () {
+        this.isRouterAlive = true;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+* {
+  margin: 0;
+  padding: 0;
+  font-family: MADE Sunflower;
+  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -khtml-user-select: none; /*早期浏览器*/
+  -moz-user-select: none; /*火狐*/
+  -ms-user-select: none; /*IE10*/
+  user-select: none;
+}
+input {
+  -webkit-user-select: auto; /*webkit浏览器*/
+}
+textarea {
+  -webkit-user-select: auto; /*webkit浏览器*/
+}
+#ScaleBox {
+  --scale: 1;
+}
+.wrap {
+  width: 3360px;
+  height: 1770px;
+  background-color: #008095;
+  overflow: hidden;
+}
+.ScaleBox {
+  width: 100%;
+  height: 100%;
+  // transform: scale(var(--scale));
+  transform-origin: 0 0;
+  & > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 3360px;
+    height: 1770px;
+  }
+  .ai-class {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 3360px;
+    height: 1770px;
+  }
+}
+.show-speak {
+  width: 3360px !important;
+  position: absolute;
+  bottom: 0;
+  height: 349px !important;
+  z-index: 9999;
+}
+::-webkit-scrollbar {
+  /*隐藏滚轮*/
+  display: none;
+}
+.top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #fff;
+  display: flex;
+  z-index: 1000;
+  font-size: 32px;
+}
+</style>

src/api/award.js

@@ -0,0 +1,37 @@
+import axios from "@/axios/index";
+
+// 文津图书分页查询
+export function getAllInformation(data) {
+  return axios({
+    url: "/api/screen/award/getAllInformation",
+    method: "post",
+    data,
+  });
+}
+
+// 文津图书查询所有届数
+export function getAwardType(data) {
+  return axios({
+    url: "/api/screen/award/getAwardType",
+    method: "get",
+    params: data,
+  });
+}
+
+//文津图书获取详情
+export function getAwardDetails(data) {
+  return axios({
+    url: "/api/screen/award/details",
+    method: "get",
+    params: data,
+  });
+}
+
+//根据关键词搜索-文津图书
+export function awardKeywordSearch(data) {
+  return axios({
+    url: "/api/common/bookView/awardKeywordSearch",
+    method: "get",
+    params: data,
+  });
+}

src/api/book.js

@@ -0,0 +1,19 @@
+import axios from "@/axios/index";
+
+// 书籍分页查询
+export function getBookList(data) {
+  return axios({
+    url: "/self/book/page",
+    method: "get",
+    params: data,
+  });
+}
+
+//书籍详情 docNumber
+export function getBookDetails(data) {
+  return axios({
+    url: "/self/book/singleInfo",
+    method: "post",
+    data,
+  });
+}

src/api/collection.js

@@ -0,0 +1,19 @@
+import axios from "@/axios/index";
+
+// 获取所有馆藏
+export function getAllCollection(data) {
+  return axios({
+    url: "/api/screen/collection/getAllCollection",
+    method: "get",
+    params: data,
+  });
+}
+
+// 查找馆藏
+export function collectionKeywordSearch(data) {
+  return axios({
+    url: "/api/common/bookView/collectionKeywordSearch",
+    method: "get",
+    params: data,
+  });
+}

src/api/comments.js

@@ -0,0 +1,19 @@
+import axios from "@/axios/index";
+
+// 获取所有领导寄语
+export function getAllComments(data) {
+  return axios({
+    url: "/api/screen/leader/getAll",
+    method: "get",
+    params: data,
+  });
+}
+
+//发送寄语
+export function insertMessage(data) {
+  return axios({
+    url: "/api/screen/leader/insertMessage",
+    method: "post",
+    data,
+  });
+}

src/api/message.js

@@ -0,0 +1,27 @@
+import axios from "@/axios/index";
+
+// 获取所有资讯
+export function getAllMessage(data) {
+  return axios({
+    url: "/api/screen/information/getAllInformation",
+    method: "get",
+    params: data,
+  });
+}
+//资讯.活动详情
+export function getMessageDetails(data) {
+  return axios({
+    url: "/api/screen/information/details",
+    method: "get",
+    params: data,
+  });
+}
+
+//查找活动
+export function informationKeywordSearch(data) {
+  return axios({
+    url: "/api/common/bookView/informationKeywordSearch",
+    method: "get",
+    params: data,
+  });
+}

src/api/photo.js

@@ -0,0 +1,19 @@
+import axios from "@/axios/index";
+
+//保存普通模式合照
+export function saveOrdinaryPhoto(data) {
+  return axios({
+    url: "/api/screen/photo/saveOrdinaryPhoto",
+    method: "post",
+    data,
+  });
+}
+
+//保存参观模式合照
+export function saveVisitPhoto(data) {
+  return axios({
+    url: "/api/screen/photo/saveVisitPhoto",
+    method: "post",
+    data,
+  });
+}

src/api/plp.js

@@ -0,0 +1,27 @@
+import axios from "@/axios/index";
+
+// 插入漂流瓶
+export function insertBottle(data) {
+  return axios({
+    url: "/api/screen/driftBottle/insertBottle",
+    method: "post",
+    data,
+  });
+}
+//随机获取一个漂流瓶
+export function getPlpDetails(data) {
+  return axios({
+    url: "/api/screen/driftBottle/random",
+    method: "get",
+    params: data,
+  });
+}
+
+//获取扫码输入的Key
+export function syncBottleKey(data) {
+  return axios({
+    url: "/api/mobile/driftBottle/syncBottleKey",
+    method: "get",
+    params: data,
+  });
+}

src/api/read.js

@@ -0,0 +1,10 @@
+import axios from "@/axios/index";
+
+// 随机获取一个文津经典诵读
+export function getAllInformation(data) {
+  return axios({
+    url: "/api/screen/recitation/random",
+    method: "get",
+    params: data,
+  });
+}

src/api/system.js

@@ -0,0 +1,63 @@
+import axios from "@/axios/index";
+
+//高德获取天气
+export function getWeather(data) {
+  return axios({
+    url: "/self/system/getLiveWeather",
+    method: "get",
+    params: data,
+  });
+}
+//获取系统模式 0普通模式，1参观模式
+export function getSystemMode(data) {
+  return axios({
+    url: "/api/common/system/getSystemMode",
+    method: "get",
+    params: data,
+  });
+}
+
+//修改系统模式 0普通模式，1参观模式
+export function changeSystemMode(data) {
+  return axios({
+    url: "/api/common/system/changeSystemMode",
+    method: "get",
+    params: data,
+  });
+}
+
+//文件上传
+export function uploadFile(data) {
+  return axios({
+    url: "/api/common/file/upload",
+    method: "post",
+    data,
+  });
+}
+
+//寄语-图片识别文字-通过id
+export function ocrImg(data) {
+  return axios({
+    url: "/api/common/file/ocr",
+    method: "get",
+    params: data,
+  });
+}
+
+//文件预览-通过文件id获取地址
+export function getFileById(data) {
+  return axios({
+    url: "/api/common/file/getFile",
+    method: "get",
+    params: data,
+  });
+}
+
+//文件下载-传id
+export function downloadFileById(data) {
+  return axios({
+    url: "/api/common/file/download",
+    method: "get",
+    params: data,
+  });
+}

src/api/websocket.js

@@ -0,0 +1,71 @@
+import axios from "@/axios/index";
+
+// 系统麦克风接口
+export function getBargeRemarke(data) {
+  return axios({
+    url: "/self/speech/startFlow",
+    method: "get",
+    params: data,
+  });
+}
+
+// 系统播报接口
+export function getTypeBSynthesis(data) {
+  return axios({
+    url: "/self/speech/typeBSynthesis",
+    method: "post",
+    data,
+  });
+}
+
+//自动播报一段文字
+export function startPlay() {
+  return axios({
+    url: "/self/speech/toFace",
+    method: "get",
+  });
+}
+
+//停止嘴型播放
+export function stopFace(data) {
+  return axios({
+    url: "/self/speech/stopFace",
+    method: "get",
+    params: data,
+  });
+}
+
+//唤醒接口
+export function wakeup(data) {
+  return axios({
+    url: "/self/speech/wakeup",
+    method: "get",
+    params: data,
+  });
+}
+
+export function getListenFace(data) {
+  return axios({
+    url: "/self/speech/listenFace",
+    method: "get",
+    params: data,
+  });
+}
+
+// 系统麦克风接口
+export function testSpeech(data) {
+  return axios({
+    url: "/self/speech/testSpeech",
+    method: "get",
+    params: data,
+  });
+}
+
+// 文字测试
+export function startFlowTest(data) {
+  return axios({
+    url: "/self/speech/startFlowTest",
+    method: "post",
+    data,
+  });
+}

src/axios/index.js

@@ -0,0 +1,67 @@
+import axios from "axios";
+import { toast } from "@/utils/myToast.js";
+const instance = axios.create({
+  baseURL: "",
+  timeout: 50000,
+});
+const CODE_MESSAGE = {
+  401: "token已过期，请重新登录",
+  403: "禁止访问",
+  404: "访问资源不存在",
+  500: "服务器发生错误",
+};
+const successCode = [200, 0, "200", "0000"];
+// 操作正常Code数组
+const codeVerificationArray = isArray(successCode)
+  ? [...successCode]
+  : [...[successCode]];
+function isArray(arg) {
+  if (typeof Array.isArray === "undefined") {
+    return Object.prototype.toString.call(arg) === "[object Array]";
+  }
+  return Array.isArray(arg);
+}
+
+const handleData = (response) => {
+  if (!response) {
+    return;
+  }
+  const config = response.config;
+  const data = response.data;
+  const status = response.status;
+  const types = ["blob", "raw"];
+  if (types.includes(config.responseType)) {
+    return response;
+  }
+  let code = data && data.code ? data.code : status;
+  if (codeVerificationArray.indexOf(code) != -1) code = 200;
+  if (code === 200) {
+    return data;
+  }
+  toast("系统错误", data.error ? data.error : CODE_MESSAGE[code], 3000);
+  return Promise.reject(data);
+};
+
+// 请求拦截
+instance.interceptors.request.use(
+  (config) => {
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截
+instance.interceptors.response.use(
+  (response) => handleData(response),
+  (error) => {
+    const { response } = error;
+    if (response === "undefined") {
+      toast("系统错误", "连接失败，请稍后再试", 3000);
+      return {};
+    } else return handleData(response);
+  }
+);
+
+export default instance;

src/components/AiAction/AiAction.vue

@@ -0,0 +1,253 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <div ref="video" class="video-div"></div>
+  </div>
+</template>
+
+<script>
+import "@/utils/peer-stream.js";
+import { mapState } from "vuex";
+import {
+  actionGroups,
+  findCurrentAcitonCode,
+  getTurnPageAction,
+} from "@/utils/action.js";
+import { routerList } from "@/utils/util";
+export default {
+  data() {
+    return {
+      message: undefined,
+      people: "guzhuang", //当前人物形象
+      stage: "shoye", //当前场景
+      init: false, //是否初始化完成
+      peopleReady: false, //人物是否切换完毕
+      stageReady: false, //场景是否切换完毕
+    };
+  },
+  mounted() {
+    this.initModel();
+  },
+  watch: {
+    // message: {
+    //   deep: true,
+    //   handler(val) {
+    //     if (!this.init) return;
+    //     //在执行打断操作以后，会返回message信息获得当前正在播放的动作，执行中断动作
+    //     if (val && val.cmd === "getanimal" && val.id) {
+    //       const code = findCurrentAcitonCode(
+    //         this.currentActionGroupName,
+    //         val.id
+    //       );
+    //      if(code) this.playAciton(code);
+    //       alert("正在打断动作" + val.id + "," + "执行动作序列组:" + code);
+    //     }
+    //   },
+    // },
+    aiAndActions: {
+      handler(val) {
+        if (!this.init) return;
+        if (
+          val.people &&
+          val.stage &&
+          val.groups &&
+          !val.instruct &&
+          !val.router
+        ) {
+          console.log("当前正在执行动作", val.groups);
+          if (this.people === "guzhuang") {
+            const show = val.groups.includes("G");
+            if (show) {
+              this.clearActions();
+            } else {
+              this.turnAnimate(val.groups);
+              //重置动作
+              this.clearActions();
+            }
+          }
+          if (this.people === "xiandai") {
+            // 现代装禁止做新年动作
+            const show = val.groups.includes("H") || val.groups.includes("T") || val.groups.includes("QAC02");
+            if (show) {
+              this.clearActions();
+            } else {
+              this.turnAnimate(val.groups);
+              //重置动作
+              this.clearActions();
+            }
+          }
+        }
+      },
+      deep: true,
+    },
+    routerTurnAnimate(val) {
+      console.log("如果切换了场景或者人物，需要云层，则停止当前所有动作");
+      if (val) {
+        this.stopAllAction();
+      }
+    },
+    needStopAction(val) {
+      if (val) {
+        this.stopAciton();
+        this.$store.commit("setNeedStopAction", false);
+      }
+    },
+    //人物和场景
+    currentAi: {
+      handler(data) {
+        if (!this.init) return;
+        if (data.people !== this.people) {
+          //人物切换
+          this.changePeople(data.people);
+        }
+        if (data.stage !== this.stage) {
+          //场景切换
+          this.changeStage(data.stage);
+        }
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    //场景和动作是否准备完毕,并且执行完指令命令后开始做动作
+    aiAndActions() {
+      return {
+        people: this.peopleReady, //人物是否切换完毕
+        stage: this.stageReady, //场景是否切换完毕
+        groups: this.currentActionGroupName, //动作
+        instruct: this.instruct, //指令
+        router: this.routerTurnAnimate, //场景切换
+      };
+    },
+    ...mapState({
+      instruct: (state) => state.publicData.instruct,
+      currentActionGroupName: (state) => state.instruct.currentActionGroupName,
+      currentAi: (state) => state.publicData.currentAi,
+      routerTurnAnimate: (state) => state.publicData.routerTurnAnimate,
+      pageOverAi: (state) => state.publicData.pageOverAi,
+      play: (state) => state.publicData.play, //当前是否有视频正在播放
+    }),
+  },
+  methods: {
+    clearActions() {
+      this.$store.commit("setCurrentActionGroupName", "");
+    },
+    //转场动画
+    turnAnimate(action) {
+      if (!this.init) return;
+      this.stopAllAction();
+      if (action) this.playAciton(action);
+    },
+    //播放动作序列组name
+    playCurrent(name) {
+      this.playAciton(actionGroups[name]);
+    },
+    //开始播放动作
+    playAciton(code) {
+      ps.emitMessage(`-cmd=playanimal -id=${code}`);
+    },
+    //中断动作，获取当前动作id
+    stopAciton() {
+      ps.emitMessage(`-cmd="getanimal"`);
+    },
+    //停止所有动作
+    stopAllAction() {
+      console.log("停止所有动作");
+      ps.emitMessage(`-cmd="stopanimal"`);
+    },
+    //切换场景 6大场景 zhixun shuji shouye changguan lingdao piaoliuping
+    changeStage(val) {
+      this.stage = val || "shouye";
+      ps.emitMessage(`
+      -cmd="level"
+      -id="${this.stage}"
+      `);
+      if (val === "songdu") {
+        this.stopAllAction();
+        this.setInitAnimate("");
+      }
+      this.stageReady = false;
+      this.$store.commit("setIsReadyAiStage", false);
+    },
+    //切换人物 古代人物现代人物 guzhuang xiandai
+    changePeople(val) {
+      this.people = val || "guzhuang";
+      ps.emitMessage(`
+      -cmd="people"
+      -id=${this.people}
+      `);
+      //古装待机动作
+      if (this.people === "guzhuang") {
+        this.setInitAnimate("QAH00");
+      }
+      //现代待机动作
+      if (this.people === "xiandai") {
+        this.setInitAnimate("QAG00");
+      }
+      this.peopleReady = false;
+      this.$store.commit("setIsReadyAiPeople", false);
+    },
+    //待机动画设置
+    setInitAnimate(val) {
+      const action = val || "";
+      // 待机动画
+      ps.emitMessage(`
+      -cmd="await"
+      -id=${action}
+      `);
+    },
+    //初始化模型
+    initModel() {
+      this.init = false;
+      // UE联调的websocket
+      const ps = document.createElement("video", {
+        is: "peer-stream",
+      });
+      // ps.muted = false;
+      // ps.loop = true;
+      // ps.setAttribute("audio", true);
+      ps.style.width = "100%";
+      ps.style.height = "100%";
+      ps.style.backgroundRepeat = "no-repeat";
+      ps.style.backgroundSize = "cover";
+      ps.style.backgroundPosition = "center";
+      // ps.id = "ws://115.236.22.179:10088/ren/demo.html";
+      ps.id = "ws://192.168.181.237:1188/test.html"; //生产打包
+      // ps.id = "ws://192.168.111.220:1188/test.html";
+      this.$refs.video.appendChild(ps);
+      // 初始化发送信息，等待加载完成之后
+      ps.addEventListener("playing", (e) => {
+        console.log("初始化");
+        this.init = true;
+        this.changeStage(this.currentAi.stage);
+        this.changePeople(this.currentAi.people);
+        // ps.audio.play();
+      });
+      // 三维停止渲染
+      ps.addEventListener("suspend", (e) => {
+        console.log("三维停止渲染");
+      });
+      ps.addEventListener("message", (e) => {
+        this.message = JSON.parse(e.detail);
+        console.log("接受的消息", this.message);
+        if (this.message.cmd === "people") {
+          this.peopleReady = true;
+          console.log("人物切换完成");
+          this.$store.commit("setIsReadyAiPeople", true);
+        }
+        if (this.message.cmd === "level") {
+          this.stageReady = true;
+          console.log("背景切换完成");
+          this.$store.commit("setIsReadyAiStage", true);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.video-div {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/AiAction/AiBlessingsActions.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="gif-main">
+    <img v-if="start" src="@/assets/actions/walk-last.png" class="ai" />
+    <img :src="gifUrl" class="ai" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    start: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      gifUrl: `/walk.gif?timestamp=${Date.now()}`,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.gif-main {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  z-index: 2;
+  .ai {
+    height: 1587.69px;
+    width: 3019.92px;
+    position: absolute;
+  }
+}
+.appear {
+  animation: appear 2s ease-in-out forwards; /* 设置动画 */
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+}
+// 显示
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

src/components/AiAction/AiPngActions.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="gif-main">
+    <!-- <canvas id="ai" ref="canvas" class="ai" /> -->
+    <img v-if="start" src="@/assets/actions/walk-last.png" class="ai" />
+    <img v-else :src="gifUrl" class="ai" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    start: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      gifUrl: `/walk.gif?timestamp=${Date.now()}`,
+    };
+  },
+};
+// import { mapState } from "vuex";
+// function PrefixZero(num, n) {
+//   return (Array(n).join(0) + num).slice(-n);
+// }
+// const photoWalkActions = [];
+// for (let i = 59; i < 184; i++) {
+//   let name = "NewLevelSequence." + PrefixZero(i, 4) + ".png";
+//   //require(`@/assets/actions/photo-walk/${name}`)
+//   photoWalkActions.push(`/media/actions/photo-walk/${name}`);
+//   // photoWalkActions.push(require(`@/assets/actions/photo-walk/${name}`));
+// }
+// export default {
+//   data() {
+//     return {
+//       imageLoaded: false,
+//       imageUrl: "",
+//       images: photoWalkActions,
+//       imageLoadedCount: 0,
+//       currentImageIndex: 0,
+//       timer: undefined,
+//     };
+//   },
+//   computed: {
+//     currentImage() {
+//       return this.images[this.currentImageIndex]; // 根据当前索引获取对应的图像路径
+//     },
+//     ...mapState({
+//       speed: (state) => state.publicData.speed,
+//     }),
+//   },
+//   mounted() {
+//     this.loadImages();
+//   },
+//   beforeDestroy() {
+//     clearInterval(this.timer);
+//     this.timer = undefined;
+//   },
+//   methods: {
+//     async loadImages() {
+//       const canvas = this.$refs.canvas;
+//       const ctx = canvas.getContext("2d");
+//       const imageLoadedPromise = new Promise((resolve, reject) => {
+//         this.imageLoadedCount = 0;
+//         this.images.map((url) => {
+//           const img = new Image();
+//           img.onload = () => {
+//             this.imageLoadedCount = this.imageLoadedCount + 1;
+//             if (this.imageLoadedCount === this.images.length) {
+//               resolve();
+//             }
+//           };
+//           img.onerror = reject;
+//           img.src = url;
+//         });
+//       });
+//       await imageLoadedPromise;
+//       const imageDataUrl = canvas.toDataURL();
+//       this.imageUrl = imageDataUrl;
+//       this.imageLoaded = true;
+//       this.currentImageIndex = 0;
+//       setTimeout(() => {
+//         this.startImage();
+//       }, 3000);
+//     },
+//     startImage() {
+//       this.timer = setInterval(() => {
+//         // this.currentImageIndex =
+//         //   (this.currentImageIndex + 1) % this.images.length; // 更新索引，循环播放
+//         this.currentImageIndex = this.currentImageIndex + 1;
+//         if (this.currentImageIndex === this.images.length - 1) {
+//           clearInterval(this.timer);
+//           this.timer = undefined;
+//           return;
+//         }
+//       }, this.speed);
+//     },
+//   },
+// };
+</script>
+
+<style lang="less" scoped>
+.gif-main {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  z-index: 2;
+  .ai {
+    height: 1587.69px;
+    // width: 3019.92px;
+    position: absolute;
+  }
+}
+.appear {
+  animation: appear 2s ease-in-out forwards; /* 设置动画 */
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+}
+// 显示
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

src/components/AiAction/PhotoAction.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="gif-main">
+    <!-- <canvas id="ai" ref="canvas" class="ai" /> -->
+    <!-- <img :src="currentImage" v-if="imageLoaded" class="ai" /> -->
+    <img v-if="showAciton" src="@/assets/actions/QAG02.gif" class="ai" />
+    <img v-else src="@/assets/actions/QAG00.gif" class="ai" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      showAciton: false,
+      timer: undefined,
+    };
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.showAciton = true;
+        this.timer = setInterval(() => {
+          this.showAciton = false;
+        }, 8500);
+        this.$broadcast("扫描照片右下角的二维码保存与我的合照哦");
+      }
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+    this.timer = undefined;
+  },
+};
+// import { mapState } from "vuex";
+// function PrefixZero(num, n) {
+//   return (Array(n).join(0) + num).slice(-n);
+// }
+// const actions = [];
+// for (let i = 0; i < 162; i++) {
+//   const name = "QAG02." + PrefixZero(i, 4) + ".png";
+//   //require(`@/assets/actions/photo-show/${name}`)
+//   actions.push(`/media/actions/photo-show/${name}`);
+// }
+// const waitActions = [];
+// for (let i = 0; i < 64; i++) {
+//   let name = "QAG00." + PrefixZero(i, 4) + ".png";
+//   //require(`@/assets/actions/xiandai/${name}`)
+//   waitActions.push(`/media/actions/xiandai/${name}`);
+// }
+// export default {
+//   props: {
+//     show: {
+//       default: false,
+//       type: Boolean,
+//     },
+//   },
+//   data() {
+//     return {
+//       imageLoaded: false,
+//       imageUrl: "",
+//       images: actions.concat(waitActions),
+//       imageLoadedCount: 0,
+//       currentImageIndex: 0,
+//       timer: undefined,
+//       broadTimer: undefined,
+//     };
+//   },
+//   computed: {
+//     currentImage() {
+//       return this.images[this.currentImageIndex]; // 根据当前索引获取对应的图像路径
+//     },
+//     ...mapState({
+//       speed: (state) => state.publicData.speed,
+//     }),
+//   },
+//   mounted() {
+//     this.loadImages();
+//   },
+//   beforeDestroy() {
+//     clearInterval(this.timer);
+//     clearTimeout(this.broadTimer);
+//     this.timer = undefined;
+//     this.broadTimer = undefined;
+//   },
+//   // watch: {
+//   //   show(val) {
+//   //     if (val) {
+//   //       setTimeout(() => {
+//   //         this.startImage();
+//   //         this.$broadcast("扫描照片右下角的二维码保存与我的合照哦");
+//   //       }, 3000);
+//   //     }
+//   //   },
+//   // },
+//   methods: {
+//     async loadImages() {
+//       const canvas = this.$refs.canvas;
+//       const ctx = canvas.getContext("2d");
+//       const imageLoadedPromise = new Promise((resolve, reject) => {
+//         this.imageLoadedCount = 0;
+//         this.images.map((url) => {
+//           const img = new Image();
+//           img.onload = () => {
+//             this.imageLoadedCount = this.imageLoadedCount + 1;
+//             if (this.imageLoadedCount === this.images.length) {
+//               resolve();
+//             }
+//           };
+//           img.onerror = reject;
+//           img.src = url;
+//         });
+//       });
+//       await imageLoadedPromise;
+//       const imageDataUrl = canvas.toDataURL();
+//       this.imageUrl = imageDataUrl;
+//       this.imageLoaded = true;
+//       this.currentImageIndex = 0;
+//       this.startImage();
+//       this.broadTimer = setTimeout(() => {
+//         this.$broadcast("扫描照片右下角的二维码保存与我的合照哦");
+//       }, 1500);
+//     },
+//     startImage() {
+//       this.timer = setInterval(() => {
+//         // this.currentImageIndex =
+//         //   (this.currentImageIndex + 1) % this.images.length; // 更新索引，循环播放
+//         this.currentImageIndex = this.currentImageIndex + 1;
+//         if (this.currentImageIndex === this.images.length - 1) {
+//           this.currentImageIndex = 162;
+//           // this.speed = 30;
+//           // clearInterval(this.timer);
+//           // this.timer = undefined;
+//           // return;
+//         }
+//       }, this.speed);
+//     },
+//   },
+// };
+</script>
+
+<style lang="less" scoped>
+.gif-main {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  .ai {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
+}
+.gif {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  .ai {
+    height: 100%;
+  }
+}
+</style>

src/components/AiAction/PlpAction.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="gif-main">
+    <canvas id="ai" ref="canvas" class="ai" />
+    <img :src="currentImage" v-if="imageLoaded" class="ai" />
+  </div>
+</template>
+
+<script>
+function PrefixZero(num, n) {
+  return (Array(n).join(0) + num).slice(-n);
+}
+const actions = [];
+for (let i = 0; i < 130; i++) {
+  const name = "QAH02." + PrefixZero(i, 4) + ".png";
+  // require(`@/assets/actions/plp-show/${name}`)
+  actions.push(`/media/actions/plp-show/${name}`);
+}
+const waitActions = [];
+for (let i = 1; i < 89; i++) {
+  let name = "QAH00." + PrefixZero(i, 4) + ".png";
+  //require(`@/assets/actions/guzhuang/${name}`)
+  waitActions.push(`/media/actions/guzhuang/${name}`);
+}
+import { mapState } from "vuex";
+export default {
+  props: {
+    num: {
+      default: 0,
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      imageLoaded: false,
+      imageUrl: "",
+      images: actions.concat(waitActions),
+      imageLoadedCount: 0,
+      currentImageIndex: 0,
+      timer: undefined,
+      broadTimer: undefined,
+    };
+  },
+  computed: {
+    currentImage() {
+      return this.images[this.currentImageIndex]; // 根据当前索引获取对应的图像路径
+    },
+    ...mapState({
+      speed: (state) => state.publicData.speed,
+    }),
+  },
+  mounted() {
+    this.loadImages();
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+    clearTimeout(this.broadTimer);
+    this.broadTimer = undefined;
+    this.timer = undefined;
+  },
+  methods: {
+    async loadImages() {
+      const canvas = this.$refs.canvas;
+      const ctx = canvas.getContext("2d");
+      const imageLoadedPromise = new Promise((resolve, reject) => {
+        this.imageLoadedCount = 0;
+        this.images.map((url) => {
+          const img = new Image();
+          img.onload = () => {
+            this.imageLoadedCount = this.imageLoadedCount + 1;
+            if (this.imageLoadedCount === this.images.length) {
+              resolve();
+            }
+          };
+          img.onerror = reject;
+          img.src = url;
+        });
+      });
+      await imageLoadedPromise;
+      const imageDataUrl = canvas.toDataURL();
+      this.imageUrl = imageDataUrl;
+      this.imageLoaded = true;
+      this.currentImageIndex = 0;
+      this.broadTimer = setTimeout(() => {
+        this.startImage();
+        this.$broadcast(`恭喜您，成为第${this.num}位投出文津集的读者`);
+      }, 1500);
+      // this.$broadcast("扫描照片右下角的二维码保存与我的合照哦");
+    },
+    startImage() {
+      this.timer = setInterval(() => {
+        // this.currentImageIndex =
+        //   (this.currentImageIndex + 1) % this.images.length; // 更新索引，循环播放
+        this.currentImageIndex = this.currentImageIndex + 1;
+        if (this.currentImageIndex === this.images.length - 1) {
+          this.currentImageIndex = 130;
+          // this.speed = 30;
+          // clearInterval(this.timer);
+          // this.timer = undefined;
+          // return;
+        }
+      }, this.speed);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.gif-main {
+  position: absolute;
+  width: 3360px;
+  height: 1770px;
+  top: 0;
+  left: -2000px;
+  display: flex;
+  justify-content: center;
+  .ai {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
+}
+</style>

src/components/Audio/BackgroundAudio.vue

@@ -0,0 +1,140 @@
+<template>
+  <!-- 音乐播放器 -->
+  <div class="music">
+    <!--音乐开始controls-->
+    <audio
+      id="backgroundAudio"
+      preload="auto"
+      :webkit-playsinline="true"
+      :playsinline="true"
+      loop
+    >
+      <source :src="audioSrc" />
+    </audio>
+    <!-- <div style="display: flex">
+      <button @click="playMusic()" class="btn-1">开始播放</button>
+      <button @click="stopMusic()" class="btn-2">停止播放</button>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      audioSrc: require("@/assets/audio/home.mp3"),
+    };
+  },
+  computed: {
+    audio() {
+      return document.getElementById("backgroundAudio");
+    },
+    ...mapState({
+      play: (state) => state.publicData.play, //当前是否有视频正在播放
+    }),
+  },
+  watch: {
+    play(val) {
+      if (val) {
+        this.stopMusic();
+      } else {
+        this.playMusic();
+      }
+    },
+    "$route.path"(val) {
+      //首页 活动 书籍查找
+      const router1 = [
+        "/",
+        "/home",
+        "/sub/active",
+        "/sub/all-activities",
+        "/sub/book-lookup",
+        "/sub/book-detail",
+        "/group-photo",
+        "/photo-preview",
+        "/blessings",
+      ];
+      //科幻 文津图书 馆藏 经典诵读
+      const router2 = [
+        "/scienceDefault",
+        "/recitation",
+        "/sub/book-ranking",
+        "/sub/book-review",
+        "/sub/book-review",
+      ];
+      //拾取文津 寄语
+      const router3 = [
+        "/comments-home",
+        "/comments",
+        "/drift-write",
+        "/drift-check",
+        "/drifting",
+      ];
+      if (router1.includes(val)) {
+        this.audioSrc = require("@/assets/audio/home.mp3");
+      }
+      if (router2.includes(val)) {
+        this.audioSrc = require("@/assets/audio/science.mp3");
+      }
+      if (router3.includes(val)) {
+        this.audioSrc = require("@/assets/audio/out.mp3");
+      }
+    },
+    audioSrc(val) {
+      this.audio.pause();
+      this.audio.src = this.audioSrc;
+      this.audioAutoPlay();
+    },
+  },
+  // beforeDestroy() {
+  //   this.audio.pause();
+  //   this.audio.src = "";
+  // },
+  methods: {
+    // 播放音乐
+    audioAutoPlay() {
+      this.audio.volume = 0.06; //音量
+      this.audio.play();
+    },
+    musicNow() {
+      // 播放音乐
+      // this.audio.onended = function () {
+      //   //播放完毕，重新循环播放
+      //   this.audio.load();
+      //   this.audio.play();
+      // };
+      this.audioAutoPlay();
+    },
+    // 停止播放音乐
+    stopMusic() {
+      this.audio.pause();
+    },
+    // 继续播放音乐
+    playMusic() {
+      this.musicNow();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.music {
+  position: absolute;
+  top: 600px;
+  .btn-1 {
+    position: relative;
+    width: 200px;
+    height: 100px;
+    background: orange;
+    font-size: 40px;
+  }
+  .btn-2 {
+    position: relative;
+    width: 200px;
+    height: 100px;
+    background: yellow;
+    font-size: 40px;
+  }
+}
+</style>

src/components/Audio/ButtonAudio.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="music">
+    <audio id="buttonAudio" :muted="false" :src="src"></audio>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      src: require("@/assets/audio/button.mp3"),
+    };
+  },
+  computed: {
+    audio() {
+      return document.getElementById("buttonAudio");
+    },
+  },
+  watch: {
+    "$store.state.publicData.btnClick"(val) {
+      this.audio.pause();
+      this.audio.src = this.src;
+      this.audioAutoPlay();
+    },
+  },
+  methods: {
+    // 播放音乐
+    audioAutoPlay() {
+      window.focus();
+      this.audio.volume = 0.2; //音量
+      this.audio.play();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.music {
+  position: absolute;
+  top: 600px;
+  .btn-1 {
+    position: relative;
+    width: 200px;
+    height: 100px;
+    background: orange;
+  }
+  .btn-2 {
+    position: relative;
+    width: 200px;
+    height: 100px;
+    background: yellow;
+  }
+}
+</style>

src/components/Audio/RouterAudio.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="music">
+    <audio id="routerAudio" :muted="false" :src="src"></audio>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      src: require("@/assets/audio/turn.mp3"),
+    };
+  },
+  computed: {
+    audio() {
+      return document.getElementById("routerAudio");
+    },
+  },
+  // beforeDestroy() {
+  //   this.audio.pause();
+  //   this.audio.src = "";
+  // },
+  // watch: {
+  //   "$route.path"(val) {
+  //     this.audio.pause();
+  //     this.audio.src = this.src;
+  //     this.audioAutoPlay();
+  //   },
+  // },
+  methods: {
+    // 播放音乐
+    audioAutoPlay() {
+      this.audio.pause();
+      this.audio.src = this.src;
+      this.audio.volume = 0.3; //音量
+      this.audio.play();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.music {
+  position: absolute;
+  top: 600px;
+  .btn-1 {
+    position: relative;
+    width: 200px;
+    height: 100px;
+    background: orange;
+  }
+  .btn-2 {
+    position: relative;
+    width: 200px;
+    height: 100px;
+    background: yellow;
+  }
+}
+</style>

src/components/BackHome/BackHome.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="back-home">
+    <!-- 首页 -->
+    <svg-icon icon-class="goHome" className="icon-goHome" @click="goHome" />
+    <!-- 返回 -->
+    <svg-icon icon-class="reload" className="icon-reload" @click="goBack" />
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    goBack() {
+      this.$btnAudioPlay();
+      if (this.$route.path === "/sub/tasting") {
+        this.$emit("return");
+      } else {
+        if (this.$route.path === "/home") {
+          return;
+        }
+        if (window.history.length <= 1) {
+          this.$router.push({ path: "/home" });
+        } else {
+          this.$router.back();
+        }
+      }
+    },
+    goHome() {
+      this.$btnAudioPlay();
+      this.$router.push("/home");
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.back-home {
+  position: absolute;
+  width: 93px;
+  height: 166px;
+}
+.icon-goHome,
+.icon-reload {
+  width: 93px !important;
+  height: 74px !important;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.icon-reload {
+  top: 92px;
+}
+</style>

src/components/BlessingsVideo/BlessingsVideo.vue

@@ -0,0 +1,246 @@
+<template>
+  <transition name="fade">
+    <div
+      class="m-video"
+      :class="{ 'u-video-hover': !hidden }"
+      :style="`width: ${width}; height: ${height};`"
+    >
+      <video
+        ref="veo"
+        :style="`object-fit: ${zoom};`"
+        :src="src"
+        :width="width"
+        :height="height"
+        :autoplay="true"
+        :controls="!originPlay && controls"
+        :loop="loop"
+        :preload="preload"
+        crossorigin="anonymous"
+        @pause="showPlay ? onPause() : () => false"
+        @playing="showPlay ? onPlaying() : () => false"
+        @click.prevent.once="onPlay"
+        @ended="playEnd()"
+        v-bind="$attrs"
+      >
+        您的浏览器不支持video标签。
+      </video>
+      <svg
+        v-show="firstPlay"
+        class="u-play"
+        :class="{ hidden: hidden }"
+        :style="`width: 2.857vw; height: 2.857vw;`"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+          d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"
+        ></path>
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+          d="M15.25 12L9.75 8.75V15.25L15.25 12Z"
+        ></path>
+      </svg>
+      <svg-icon
+        icon-class="video-return"
+        className="video-return"
+        @click="handleClose"
+      />
+    </div>
+  </transition>
+</template>
+<script>
+import { clickOutside } from "@/utils/clickOutside";
+import { mapState } from "vuex";
+export default {
+  name: "Video",
+  directives: {
+    "click-outside": clickOutside, // 注册自定义指令
+  },
+  props: {
+    src: {
+      // 视频文件url，必传，支持网络地址 https 和相对地址 require('@/assets/files/Bao.mp4')
+      type: String,
+      required: true,
+      default: "",
+    },
+    width: {
+      // 视频播放器宽度
+      type: String,
+      default: "100%",
+    },
+    height: {
+      // 视频播放器高度
+      type: String,
+      default: "100%",
+    },
+    controls: {
+      // 是否向用户显示控件，比如进度条，全屏
+      type: Boolean,
+      default: true,
+    },
+    loop: {
+      // 视频播放完成后，是否循环播放
+      type: Boolean,
+      default: false,
+    },
+    preload: {
+      // 是否在页面加载后载入视频，如果设置了autoplay属性，则preload将被忽略；
+      type: String,
+      default: "auto", // auto:一旦页面加载，则开始加载视频; metadata:当页面加载后仅加载视频的元数据 none:页面加载后不应加载视频
+    },
+    showPlay: {
+      // 播放暂停时是否显示播放器中间的暂停图标
+      type: Boolean,
+      default: true,
+    },
+    playWidth: {
+      // 中间播放暂停按钮的边长
+      type: Number,
+      default: 96,
+    },
+    zoom: {
+      // video的poster默认图片和视频内容缩放规则
+      type: String,
+      default: "fill", // none:(默认)保存原有内容，不进行缩放; fill:不保持原有比例，内容拉伸填充整个内容容器; contain:保存原有比例，内容以包含方式缩放; cover:保存原有比例，内容以覆盖方式缩放
+    },
+  },
+  computed: {
+    ...mapState({
+      stopMidea: (state) => state.publicData.stopMidea,
+    }),
+  },
+  data() {
+    return {
+      veoPoster: this.poster,
+      originPlay: true,
+      hidden: false,
+      firstPlay: true,
+    };
+  },
+  watch: {
+    //如果终止
+    stopMidea(val) {
+      if (val) {
+        this.pauseVideo();
+        this.$store.commit("setStopMidea", false);
+      }
+    },
+  },
+  methods: {
+    openVideo() {
+      this.$store.commit("setIsPlay", true);
+      this.init();
+    },
+    init() {
+      if (this.autoplay) {
+        this.hidden = true;
+        this.originPlay = false;
+      }
+      if (!this.$refs.veo) return;
+      const _this = this;
+      this.$refs.veo.onerror = function () {
+        _this.$msgTip.showTip({
+          title: "视频异常",
+          message: "视频加载失败",
+        });
+        setTimeout(() => {
+          _this.handleClose();
+        }, 2000);
+      };
+    },
+    //关闭视频框停止播放
+    handleClose() {
+      this.$store.commit("setIsPlay", false);
+      this.$emit("close-video");
+      this.$refs.veo.pause(); // 暂停视频
+      this.$refs.veo.currentTime = 0; // 将视频时间重置为0
+      this.$btnAudioPlay();
+    },
+    //停止播放视频
+    pauseVideo() {
+      if (!this.$refs.veo) return;
+      this.$refs.veo.pause();
+      this.$store.commit("setIsPlay", false);
+    },
+    onPlay() {
+      if (this.originPlay) {
+        this.$refs.veo.currentTime = 0;
+        this.originPlay = false;
+      }
+      if (this.autoplay) {
+        this.$refs.veo.pause();
+      } else {
+        this.hidden = true;
+        this.$refs.veo.play();
+      }
+    },
+    onPause() {
+      this.hidden = false;
+      this.firstPlay = false;
+      this.$store.commit("setIsPlay", false);
+    },
+    onPlaying() {
+      this.hidden = true;
+      this.firstPlay = false;
+      this.$store.commit("setIsPlay", true);
+    },
+    playEnd() {
+      // 播放完毕停顿10s后关闭
+      setTimeout(() => {
+          this.handleClose();
+      }, 10 * 1000);
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.video-return {
+  width: 310px;
+  height: 88px;
+  position: absolute;
+  bottom: 257px;
+  left: 93px;
+  z-index: 10000;
+}
+.m-video {
+  display: inline-block;
+  position: relative;
+  background: transparent;
+  border-radius: 10px;
+  cursor: pointer;
+  .u-play {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    fill: none;
+    color: #fff;
+    pointer-events: none;
+    opacity: 0.7;
+    transition: opacity 0.3s;
+    path {
+      stroke: #fff;
+    }
+  }
+  .hidden {
+    opacity: 0;
+  }
+}
+.u-video-hover {
+  &:hover {
+    .u-play {
+      opacity: 0.9;
+    }
+  }
+}
+//所有控件
+video::-webkit-media-controls-enclosure {
+  display: none;
+}
+</style>

src/components/FloatIcon/FloatIcon.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <!-- 悬浮菜单开始 -->
+    <div
+      class="realTranslationInfos"
+      id="dragbtn"
+      v-drag
+      @click="openFeedbackDialog()"
+    >
+      <div class="RealtranslationBox">
+        <img
+          draggable="false"
+          :src="imgUrl"
+          alt=""
+          ref="tranlationBtn"
+          class="bottom-icon"
+        />
+      </div>
+    </div>
+    <!-- 悬浮菜单结束 -->
+  </div>
+</template>
+<script>
+export default {
+  // 组件名字
+  name: "FloatIcon",
+  // 组件参数
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      toggle: false,
+      img1: require("@/assets/poster-ai.png"),
+      img2: require("@/assets/loading.gif"),
+      imgUrl: require("@/assets/poster-ai.png"),
+    };
+  },
+  mounted() {},
+  // 组件方法
+  methods: {
+    openFeedbackDialog() {
+      let isClick = document
+        .getElementById("dragbtn")
+        .getAttribute("data-flag");
+      if (isClick === "true") {
+        this.toggle = !this.toggle;
+        this.imgUrl = this.toggle ? this.img2 : this.img1;
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.realTranslationInfos {
+  width: 66px;
+  height: 66px;
+  position: fixed;
+  bottom: 56px;
+  right: 20px;
+  // transition: all 0.3s ease;
+  .RealtranslationBox {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 2px;
+    bottom: 5px;
+    z-index: 9999;
+    .bottom-icon {
+      width: 66px;
+      height: 66px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/components/Icons/SvgIcon/index.vue

@@ -0,0 +1,65 @@
+<template>
+    <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+    <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners" preserveAspectRatio='none'>
+      <use :xlink:href="iconName" />
+    </svg>
+  </template>
+   
+  <script>
+  import { isExternal } from '@/utils/validate'
+   
+  export default {
+    name: 'SvgIcon',
+    props: {
+      iconClass: {
+        type: String,
+        required: true
+      },
+      className: {
+        type: String,
+        default: ''
+      },
+      viewBox:{
+        type:String,
+        default:''
+      }
+    },
+    computed: {
+      isExternal() {
+        return isExternal(this.iconClass)
+      },
+      iconName() {
+        return `#icon-${this.iconClass}`
+      },
+      svgClass() {
+        if (this.className) {
+          return 'svg-icon ' + this.className
+        } else {
+          return 'svg-icon'
+        }
+      },
+      styleExternalIcon() {
+        return {
+          mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+          '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+        }
+      }
+    }
+  }
+  </script>
+   
+  <style scoped>
+  .svg-icon {
+    width: 1em;
+    height: 1em;
+    /* vertical-align: -0.15em; */
+    fill: currentColor;
+    overflow: hidden;
+  }
+   
+  .svg-external-icon {
+    background-color: currentColor;
+    mask-size: cover!important;
+    display: inline-block;
+  }
+  </style>

src/components/Icons/index.js

@@ -0,0 +1,12 @@
+
+import Vue from 'vue'
+import SvgIcon from './SvgIcon'// svg component
+ 
+// register globally
+Vue.component('svg-icon', SvgIcon)
+ 
+// 进行导入所有的svg格式  如果手动引入 需要依次引入 
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+
+requireAll(req)

src/components/Icons/svg/Union.svg

@@ -0,0 +1,3 @@
+<svg width="83" height="112" viewBox="0 0 83 112" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.0039 6.00017L5.00391 0L1.23826e-06 7.99998C-3.50264e-05 8.01247 0.000725512 8.02472 0.00225057 8.03675V110.975L5.00391 112L82.0039 106V6.00017Z"/>
+</svg>

src/components/Icons/svg/all-active-icon.svg

@@ -0,0 +1,19 @@
+<svg width="55" height="44" viewBox="0 0 55 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 43H39.8859C40.5785 43 41.2218 42.6416 41.5864 42.0527L53.3483 23.0527C53.7476 22.4077 53.7476 21.5923 53.3483 20.9473L41.5864 1.94729C41.2218 1.35837 40.5785 1 39.8859 1H1" stroke="url(#paint0_linear_1921_3153)" stroke-opacity="0.25" stroke-linecap="square"/>
+<path d="M50.6627 21.466L39.2943 3.46601C39.1111 3.17591 38.7919 3 38.4488 3H3C2.44772 3 2 3.44772 2 4V40C2 40.5523 2.44771 41 3 41H38.4488C38.7919 41 39.1111 40.8241 39.2943 40.534L50.6627 22.534C50.8688 22.2078 50.8688 21.7922 50.6627 21.466Z" fill="url(#paint1_linear_1921_3153)" fill-opacity="0.12"/>
+<path d="M21.4552 12H15.6076C14.719 12 14 12.719 14 13.6076V19.4552C14 20.3438 14.719 21.0629 15.6076 21.0629H21.4552C22.3438 21.0629 23.0629 20.3438 23.0629 19.4552V13.6076C23.0629 12.719 22.3438 12 21.4552 12ZM32.3933 12H26.5448C25.6562 12 24.9371 12.719 24.9371 13.6076V19.4552C24.9371 20.3438 25.6562 21.0629 26.5448 21.0629H32.3924C33.281 21.0629 34 20.3438 34 19.4552V13.6076C34 12.719 33.281 12 32.3924 12H32.3933ZM21.4552 22.9371H15.6076C14.719 22.9371 14 23.6562 14 24.5448V30.3924C14 31.281 14.719 32 15.6076 32H21.4552C22.3438 32 23.0629 31.281 23.0629 30.3924V24.5448C23.0629 23.6562 22.3438 22.9371 21.4552 22.9371ZM32.3933 22.9371H26.5448C25.6562 22.9371 24.9371 23.6562 24.9371 24.5448V30.3924C24.9371 31.281 25.6562 32 26.5448 32H32.3924C33.281 32 34 31.281 34 30.3924V24.5448C34 23.6562 33.281 22.9371 32.3924 22.9371H32.3933Z" fill="url(#paint2_linear_1921_3153)"/>
+<defs>
+<linearGradient id="paint0_linear_1921_3153" x1="54" y1="22" x2="1" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFDC9F"/>
+<stop offset="1" stop-color="#FFDC9F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1921_3153" x1="2" y1="23" x2="51" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFDEA6" stop-opacity="0"/>
+<stop offset="1" stop-color="#FFDEA6" stop-opacity="0.54"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1921_3153" x1="24" y1="12" x2="24" y2="32" gradientUnits="userSpaceOnUse">
+<stop offset="0.188281" stop-color="#F5B438"/>
+<stop offset="1" stop-color="#F3DAAB"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/backIcon.svg

@@ -0,0 +1,9 @@
+<svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3671 20.291C11.9882 20.986 10.9902 20.986 10.6112 20.291L0.538216 1.81775C0.141272 1.08978 0.99275 0.32106 1.67649 0.790115C7.58946 4.84654 15.3889 4.84654 21.3019 0.790114C21.9856 0.321058 22.8371 1.08978 22.4402 1.81775L12.3671 20.291Z" fill="url(#paint0_linear_1268_110)"/>
+<defs>
+<linearGradient id="paint0_linear_1268_110" x1="11.4892" y1="21.9011" x2="11.4892" y2="-1.07157" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5B438"/>
+<stop offset="1" stop-color="#F3DAAB"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/book-bcg.svg

@@ -0,0 +1,26 @@
+<svg width="436" height="232" viewBox="0 0 436 232" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M394.604 229.043H385.733V232L397.561 232V227.565H404.214V229.043H402.735V228.304H399.778V232H406.431V224.608H394.604V229.043ZM408.649 232L421.955 232V226.825H418.998V229.043H411.606V219.433H399.039V223.869H401.996V222.39H408.649V232ZM422.694 232L434 232C435.105 232 436 231.104 436 230V218.694H431.565V221.651H433.043V229.043H425.651V222.39H422.694V232ZM413.824 226.086H421.955V223.129H416.78V219.433H413.824V226.086ZM427.869 223.129H426.39V226.086H430.826V218.694H427.869V223.129ZM418.998 222.39H421.955V217.216H423.433V214.259H418.998V222.39ZM424.173 217.955H427.129V211.302H428.608V213.519H431.565V208.345H424.173V217.955ZM433.043 214.259H427.869V217.216H436V204.649H427.129V197.996H433.043V200.214H431.565V198.735H428.608V203.17H436V195.039H424.173V207.606H433.043V214.259ZM427.129 218.694H422.694V221.651H427.129V218.694ZM428.608 194.3H431.565V191.343H436V181.733H433.043V188.386H428.608V194.3Z" fill="url(#paint0_linear_1821_1248)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.396 229.043H50.2666V232L38.4392 232V227.565H31.7862V229.043H33.2646V228.304H36.2215V232H29.5686V224.608H41.396V229.043ZM27.3509 232L14.045 232V226.825H17.0019V229.043H24.3941V219.433H36.9607V223.869H34.0039V222.39H27.3509V232ZM13.3058 232L1.99994 232C0.895367 232 -6.48499e-05 231.104 -6.48499e-05 230V218.694H4.43523V221.651H2.9568V229.043H10.349V222.39H13.3058V232ZM22.1764 226.086H14.045V223.129H19.2195V219.433H22.1764V226.086ZM8.13131 223.129H9.60974V226.086H5.17445V218.694H8.13131V223.129ZM17.0019 222.39H14.045V217.216H12.5666V214.259H17.0019V222.39ZM11.8274 217.955H8.87053V211.302H7.39209V213.519H4.43523V208.345H11.8274V217.955ZM2.9568 214.259H8.13131V217.216H-6.48499e-05V204.649H8.87053V197.996H2.9568V200.214H4.43523V198.735H7.39209V203.17H-6.48499e-05V195.039H11.8274V207.606H2.9568V214.259ZM8.87053 218.694H13.3058V221.651H8.87053V218.694ZM7.39209 194.3H4.43523V191.343H-6.48499e-05V181.733H2.9568V188.386H7.39209V194.3Z" fill="url(#paint1_linear_1821_1248)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M394.604 2.95686H385.733V0L397.561 0V4.43529H404.214V2.95686H402.735V3.69608H399.778V0H406.431V7.39216H394.604V2.95686ZM408.649 0L421.955 0V5.17451H418.998V2.95686H411.606V12.5667H399.039V8.13137H401.996V9.6098H408.649V0ZM422.694 0L434 0C435.105 0 436 0.895431 436 2V13.3059H431.565V10.349H433.043V2.95686H425.651V9.6098H422.694V0ZM413.824 5.91373H421.955V8.87059H416.78V12.5667H413.824V5.91373ZM427.869 8.87059H426.39V5.91373H430.826V13.3059H427.869V8.87059ZM418.998 9.6098H421.955V14.7843H423.433V17.7412H418.998V9.6098ZM424.173 14.0451H427.129V20.698H428.608V18.4804H431.565V23.6549H424.173V14.0451ZM433.043 17.7412H427.869V14.7843H436V27.351H427.129V34.0039H433.043V31.7863H431.565V33.2647H428.608V28.8294H436V36.9608H424.173V24.3941H433.043V17.7412ZM427.129 13.3059H422.694V10.349H427.129V13.3059ZM428.608 37.7H431.565V40.6569H436V50.2667H433.043V43.6137H428.608V37.7Z" fill="url(#paint2_linear_1821_1248)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.396 2.95686H50.2666V0L38.4392 0V4.43529H31.7862V2.95686H33.2646V3.69608H36.2215V0H29.5686V7.39216H41.396V2.95686ZM27.3509 0L14.045 0V5.17451H17.0019V2.95686H24.3941V12.5667H36.9607V8.13137H34.0039V9.6098H27.3509V0ZM13.3058 0L1.99994 0C0.895367 0 -6.48499e-05 0.895431 -6.48499e-05 2V13.3059H4.43523V10.349H2.9568V2.95686H10.349V9.6098H13.3058V0ZM22.1764 5.91373H14.045V8.87059H19.2195V12.5667H22.1764V5.91373ZM8.13131 8.87059H9.60974V5.91373H5.17445V13.3059H8.13131V8.87059ZM17.0019 9.6098H14.045V14.7843H12.5666V17.7412H17.0019V9.6098ZM11.8274 14.0451H8.87053V20.698H7.39209V18.4804H4.43523V23.6549H11.8274V14.0451ZM2.9568 17.7412H8.13131V14.7843H-6.48499e-05V27.351H8.87053V34.0039H2.9568V31.7863H4.43523V33.2647H7.39209V28.8294H-6.48499e-05V36.9608H11.8274V24.3941H2.9568V17.7412ZM8.87053 13.3059H13.3058V10.349H8.87053V13.3059ZM7.39209 37.7H4.43523V40.6569H-6.48499e-05V50.2667H2.9568V43.6137H7.39209V37.7Z" fill="url(#paint3_linear_1821_1248)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1821_1248" x1="437.5" y1="304.733" x2="410.867" y2="181.733" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3DAAB"/>
+<stop offset="1" stop-color="#F3DAAB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1821_1248" x1="-1.5" y1="304.733" x2="25.1333" y2="181.733" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3DAAB"/>
+<stop offset="1" stop-color="#F3DAAB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1821_1248" x1="437.5" y1="-72.7333" x2="410.867" y2="50.2667" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3DAAB"/>
+<stop offset="1" stop-color="#F3DAAB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1821_1248" x1="-1.5" y1="-72.7333" x2="25.1333" y2="50.2667" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3DAAB"/>
+<stop offset="1" stop-color="#F3DAAB" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/bookDetailListIcon.svg

@@ -0,0 +1,30 @@
+<svg width="1324" height="375" viewBox="0 0 1324 375" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_4_2499)">
+<path d="M1306 18.0001L1306 353C1306 354.104 1305.1 355 1304 355L662 355L20 355C18.8954 355 18 354.105 18 353L18 18.0002C18 16.8957 18.8955 16.0002 20 16.0002L661.769 16.0001L1304 16.0001C1305.1 16.0001 1306 16.8955 1306 18.0001Z" fill="url(#paint0_linear_4_2499)" fill-opacity="0.15" shape-rendering="crispEdges"/>
+<path d="M1307 18.0001L1307 353C1307 354.657 1305.66 356 1304 356L662 356L20 356C18.3432 356 17 354.657 17 353L17 18.0002C17 16.3434 18.3433 15.0002 20 15.0002L661.769 15.0001L1304 15.0001C1305.66 15.0001 1307 16.3432 1307 18.0001Z" stroke="url(#paint1_linear_4_2499)" stroke-opacity="0.2" stroke-width="2" stroke-linecap="square" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_bd_4_2499" x="0" y="-1" width="1324" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="7.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4_2499"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_4_2499" result="effect2_dropShadow_4_2499"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_4_2499" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_4_2499" x1="444.871" y1="-17.2562" x2="564.442" y2="509.114" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BDB4A5" stop-opacity="0.3"/>
+<stop offset="0.584571" stop-color="#BDB4A5" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#BDB4A5" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4_2499" x1="1306" y1="355" x2="154.788" y2="-227.898" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFDC9F"/>
+<stop offset="0.481641" stop-color="#FFDC9F" stop-opacity="0.342675"/>
+<stop offset="0.913995" stop-color="#FFDC9F" stop-opacity="0.7"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/bookImg.svg

@@ -0,0 +1,23 @@
+<svg width="153" height="203" viewBox="0 0 153 203" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1324_4311)">
+<path d="M20 23C20 21.8954 20.8954 21 22 21H135V186H23C21.3431 186 20 184.657 20 183V23Z" fill="url(#paint0_linear_1324_4311)" shape-rendering="crispEdges"/>
+</g>
+<path d="M20 21C20 19.8954 20.8954 19 22 19H135V182H20V21Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1324_4311" x="0" y="0" width="153" height="203" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="-2"/>
+<feGaussianBlur stdDeviation="9.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.125 0 0 0 0 0.0808542 0 0 0 0 0.0401042 0 0 0 0.35 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1324_4311"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1324_4311" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1324_4311" x1="77.5" y1="21" x2="77.5" y2="186" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="0.968823" stop-color="white" stop-opacity="0.44"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/bookReviewCodeBack.svg

@@ -0,0 +1,23 @@
+<svg width="968" height="259" viewBox="0 0 968 259" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_b_41_1732)">
+    <path d="M967 3.00004L967 256C967 257.104 966.105 258 965 258L484 258L2.99995 258C1.8954 258 0.99995 257.105 0.99995 256L0.999939 3.00017C0.999939 1.8956 1.89539 1.00017 3 1.00017L483.827 1.0001L965 1.00004C966.105 1.00004 967 1.89547 967 3.00004Z" fill="url(#paint0_linear_41_1732)" fill-opacity="0.1"/>
+    <path d="M967 3.00004L967 256C967 257.104 966.105 258 965 258L484 258L2.99995 258C1.8954 258 0.99995 257.105 0.99995 256L0.999939 3.00017C0.999939 1.8956 1.89539 1.00017 3 1.00017L483.827 1.0001L965 1.00004C966.105 1.00004 967 1.89547 967 3.00004Z" stroke="url(#paint1_linear_41_1732)" stroke-opacity="0.2" stroke-width="2" stroke-linecap="square"/>
+    </g>
+    <defs>
+    <filter id="filter0_b_41_1732" x="-16.0001" y="-15.9999" width="1000" height="291" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feGaussianBlur in="BackgroundImageFix" stdDeviation="8"/>
+    <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_41_1732"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_41_1732" result="shape"/>
+    </filter>
+    <linearGradient id="paint0_linear_41_1732" x1="967" y1="134.611" x2="1.65629" y2="134.611" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#BDB4A5" stop-opacity="0.6"/>
+    <stop offset="1" stop-color="#BDB4A5" stop-opacity="0.01"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_41_1732" x1="967" y1="129.5" x2="7.56254" y2="129.5" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#FFDC9F"/>
+    <stop offset="0.808816" stop-color="#FFDC9F" stop-opacity="0"/>
+    </linearGradient>
+    </defs>
+    </svg>
+    

src/components/Icons/svg/bookReviewCodeIcon.svg

@@ -0,0 +1,8 @@
+<svg width="110" height="109" viewBox="0 0 110 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M109 1.00002L109 108L55 108L1 108L1 1.00002L54.9806 1.00002L109 1.00002Z" stroke="#FFDC9F" stroke-opacity="0.5" stroke-linecap="square"/>
+<path d="M55 105.64L80.8089 105.64L93.7133 105.64L100.165 105.64L103.392 105.64L105.005 105.64L105.824 104.853L106.618 104.042L106.618 102.444L106.618 99.2473L106.618 92.8548L106.618 80.0699L106.618 54.5001L106.618 28.9302L106.618 16.1453L106.618 9.75283L106.618 6.5566L106.618 4.95848L105.824 4.14713L105.004 3.36037L103.39 3.36037L100.163 3.36037L93.7086 3.36037L80.7996 3.36037L54.9815 3.36037L29.1819 3.36037L16.2822 3.36037L9.83226 3.36037L6.60732 3.36037L4.99483 3.36037L4.17648 4.14713L3.38237 4.95848L3.38237 6.5566L3.38237 9.75283L3.38237 16.1453L3.38237 28.9302L3.38237 54.5001L3.38237 80.0699L3.38237 92.8548L3.38237 99.2473L3.38237 102.444L3.38237 104.042L4.17649 104.853L4.99543 105.64L6.60848 105.64L9.83458 105.64L16.2868 105.64L29.1912 105.64L55 105.64Z" stroke="#FFDC9F" stroke-opacity="0.1" stroke-linecap="square"/>
+<path d="M109 1H105.824L109 4.14706V1Z" fill="#9D8968" stroke="#9D8968"/>
+<path d="M0.999799 1H4.17627L0.999799 4.14706V1Z" fill="#9D8968" stroke="#9D8968"/>
+<path d="M109 108L109 104.853L105.824 108L109 108Z" fill="#9D8968" stroke="#9D8968"/>
+<path d="M1 108L1 104.853L4.17647 108L1 108Z" fill="#9D8968" stroke="#9D8968"/>
+</svg>

src/components/Icons/svg/bookReviewContent.svg

@@ -0,0 +1,23 @@
+<svg width="184" height="247" viewBox="0 0 184 247" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1412_10763)">
+<path d="M20 23C20 21.8954 20.8954 21 22 21H166V230H23C21.3431 230 20 228.657 20 227V23Z" fill="url(#paint0_linear_1412_10763)" shape-rendering="crispEdges"/>
+</g>
+<path d="M20 21C20 19.8954 20.8954 19 22 19H166V226H20V21Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1412_10763" x="0" y="0" width="184" height="247" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="-2"/>
+<feGaussianBlur stdDeviation="9.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.125 0 0 0 0 0.0808542 0 0 0 0 0.0401042 0 0 0 0.35 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1412_10763"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1412_10763" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1412_10763" x1="93" y1="21" x2="93" y2="230" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="0.968823" stop-color="white" stop-opacity="0.44"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/bookReviewDetail.svg

@@ -0,0 +1,63 @@
+<svg width="974" height="397" viewBox="0 0 974 397" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_b_41_1950)">
+<path d="M967 40L967 394C967 395.104 966.105 396 965 396L484 396L2.99995 396C1.8954 396 0.999955 395.105 0.999954 394L0.999939 40.0002C0.999939 38.8956 1.89539 38.0002 3 38.0002L483.827 38.0001L965 38.0001C966.105 38.0001 967 38.8955 967 40Z" fill="url(#paint0_linear_41_1950)" fill-opacity="0.15"/>
+<path d="M967 40L967 394C967 395.104 966.105 396 965 396L484 396L2.99995 396C1.8954 396 0.999955 395.105 0.999954 394L0.999939 40.0002C0.999939 38.8956 1.89539 38.0002 3 38.0002L483.827 38.0001L965 38.0001C966.105 38.0001 967 38.8955 967 40Z" stroke="url(#paint1_linear_41_1950)" stroke-opacity="0.2" stroke-width="2" stroke-linecap="square"/>
+</g>
+<g filter="url(#filter1_d_41_1950)">
+<path d="M45.904 18.696L46.24 18.36C67.464 17.184 63.88 33.256 55.368 29.672C53.352 25.64 49.32 21.272 45.904 18.696ZM38.344 30.568V42.944H44.168L45.12 30.568H38.344ZM56.264 39.08L63.208 44.848C62.76 45.352 62.144 45.744 60.968 45.912C60.464 57 59.512 61.872 56.544 63.944C54.696 65.288 52.456 65.96 48.536 65.96C48.592 63.608 48.368 61.704 47.36 60.584C46.296 59.408 44.448 58.456 41.872 57.896L41.928 57.336C44.224 57.504 47.92 57.672 49.04 57.672C49.88 57.672 50.272 57.56 50.664 57.224C51.728 56.328 52.288 52.072 52.624 44.512H38.344V66.128C38.344 66.968 34.536 69.152 31.288 69.152H29.608V44.512H12.304L11.8 42.944H29.608V30.568H16.336L15.832 29H29.608V16.232L40.192 17.24C40.08 17.912 39.744 18.472 38.344 18.696V29H44.672L47.696 25.416L55.2 30.792C54.752 31.296 54.304 31.52 53.128 31.744L52.288 42.776L56.264 39.08ZM70.096 17.016L70.488 16.736C87.4 17.968 81.464 30.736 74.632 26.2C73.904 22.952 71.832 19.424 70.096 17.016ZM87.792 50.784L88.016 51.232C86.056 53.864 82.36 58.624 77.432 63.888C76.984 65.456 76.088 66.576 75.248 67.192L69.592 59.016C72.448 57.392 72.896 56.776 72.896 55.432V32.864H66.736L66.232 31.296H73.008L76.48 27.88L82.752 33.088C82.472 33.48 81.8 33.928 80.344 34.096V54.536C82.696 53.36 85.272 52.072 87.792 50.784ZM109.24 45.52L113.16 40.368C113.16 40.368 117.584 43.84 120.272 46.192C120.104 46.808 119.488 47.088 118.648 47.088H104.648V66.856C104.592 67.36 102.184 69.04 98.04 69.04H96.528V47.088H82.304L81.856 45.52H96.528V23.512H84.88L84.432 21.944H106.832L110.864 16.68C110.864 16.68 115.4 20.208 118.088 22.616C117.976 23.232 117.304 23.512 116.52 23.512H104.648V45.52H109.24ZM85.384 28.104L85.944 27.88C102.072 34.992 94.456 48.04 88.016 41.656C88.128 37.064 86.84 32.136 85.384 28.104ZM105.656 43.952L105.152 43.504C107.056 38.632 108.68 31.24 109.184 26.928L118.648 30.176C118.48 30.792 118.088 31.24 116.688 31.296C114.336 35.272 110.024 40.592 105.656 43.952Z" fill="url(#paint2_linear_41_1950)" shape-rendering="crispEdges"/>
+</g>
+<mask id="mask0_41_1950" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="567" y="38" width="399" height="358">
+<path d="M966 40L966 394C966 395.104 965.104 396 964 396L766.5 396L569 396C567.895 396 567 395.104 567 394L567 40.0001C567 38.8955 567.895 38.0001 569 38.0001L766.428 38.0001L964 38.0001C965.104 38.0001 966 38.8955 966 40Z" fill="#BDB4A5" fill-opacity="0.1"/>
+</mask>
+<g mask="url(#mask0_41_1950)">
+<g opacity="0.05" filter="url(#filter2_d_41_1950)">
+<path d="M738.122 290.638C736.594 286.899 734.827 282.311 740.133 279.416C740.409 279.264 740.537 278.902 740.668 278.612C749.034 260.169 765.246 249.434 779.698 236.723C801.783 217.25 822.174 195.657 840.484 172.377C874.747 128.829 909.154 85.3469 943.487 41.796C947.727 36.3629 952.326 31.2037 956.278 25.5656C958.822 21.9053 961.609 21.3115 965.435 22.3991C966.286 22.6567 967.129 22.7 968.185 22.8077C969.101 22.92 969.769 21.8966 969.39 21.0513C968.632 19.3605 968.028 18.0936 967.562 16.7506C965.484 11.2427 968.676 8.06124 974.273 7.58798C979.313 7.2049 981.987 9.54662 985.034 12.5194C986.775 14.2488 988.923 15.5355 991.001 16.8246C994.795 19.0574 998.084 25.0968 997.666 29.4011C997.358 32.7721 993.936 35.3892 990.202 34.9421C988.581 34.7103 986.954 34.3357 985.115 33.8967C984.407 33.7058 983.655 34.303 983.609 35.0196C983.558 35.5934 983.572 36.0219 983.792 36.3006C987.917 42.169 984.901 46.4172 981.124 50.9768C963.129 73.1732 945.207 95.4387 927.429 117.842C907.497 142.964 887.708 168.152 867.918 193.34C846.987 220.068 829.216 248.978 813.095 278.978C809.594 285.48 805.867 291.818 801.653 297.806C797.277 304.022 792.376 309.86 786.654 315.114C783.317 318.157 781.191 321.732 776.125 321.33C775.282 321.286 772.755 319.774 772.088 320.797C762.628 334.815 752.983 347.24 740.989 356.413C728.821 365.72 714.257 371.695 697.852 374.62C679.926 377.866 659.617 373.135 642.099 369.645C629.595 367.132 617.111 363.116 604.042 364.697C602.645 364.887 602.157 362.901 603.47 362.285C604.507 361.821 605.546 361.429 606.516 361.039C627.578 352.97 648.723 345.255 669.636 336.904C688.264 329.488 705.25 319.124 720.449 305.673C726.107 300.693 729.425 290.792 741.044 295.642C741.762 296.119 747.793 300.102 748.466 299.585M984.619 10.6027C984.189 10.331 983.959 9.76666 984.083 9.262C985.267 4.78909 986.337 1.10655 987.194 -2.64039C989.035 -10.5675 991.296 -18.5087 990.877 -26.8607C990.865 -27.2179 991.832 -27.6792 992.731 -28.0668C993.285 -28.2999 993.923 -28.1067 994.29 -27.6184C995.104 -26.3586 996.06 -25.032 995.958 -23.8845C995.386 -20.0041 993.683 -16.3719 993.111 -12.4915C992.541 -8.53962 992.957 -4.47776 992.74 -0.466228C992.662 1.39552 992.091 3.20225 991.732 5.07337C991.613 5.72089 991.282 6.30401 991.163 6.95153C990.671 9.04162 994.08 12.3598 990.169 12.9197C988.146 13.2734 986.054 11.5557 984.619 10.6027Z" fill="url(#paint3_linear_41_1950)" shape-rendering="crispEdges"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_b_41_1950" x="-20.0001" y="17.0001" width="1008" height="400" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="10"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_41_1950"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_41_1950" result="shape"/>
+</filter>
+<filter id="filter1_d_41_1950" x="7.79999" y="14.232" width="116.472" height="60.92" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_41_1950"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_41_1950" result="shape"/>
+</filter>
+<filter id="filter2_d_41_1950" x="602.702" y="-28.1653" width="398" height="406.872" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="3" dy="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_41_1950"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_41_1950" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_41_1950" x1="321.154" y1="2.87982" x2="490.774" y2="533.181" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BDB4A5" stop-opacity="0.3"/>
+<stop offset="0.584571" stop-color="#BDB4A5" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#BDB4A5" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_41_1950" x1="140.583" y1="396" x2="5.77228" y2="39.9682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFDC9F"/>
+<stop offset="0.608743" stop-color="#FFDC9F" stop-opacity="0.342675"/>
+<stop offset="0.913995" stop-color="#FFDC9F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_41_1950" x1="65" y1="17.931" x2="65" y2="81.7391" gradientUnits="userSpaceOnUse">
+<stop offset="0.217079" stop-color="#F3DAAB"/>
+<stop offset="0.668468" stop-color="#F3DAAB" stop-opacity="0.3"/>
+<stop offset="0.903824" stop-color="#F3DAAB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_41_1950" x1="995.534" y1="-37.0403" x2="560.738" y2="295.999" gradientUnits="userSpaceOnUse">
+<stop offset="0.0773058" stop-color="#F3DAAB" stop-opacity="0"/>
+<stop offset="1" stop-color="#F3DAAB"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/bottle-link.svg

@@ -0,0 +1,14 @@
+<svg width="10" height="618" viewBox="0 0 10 618" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.5" width="10" height="12" fill="url(#paint0_linear_70_2227)"/>
+<rect opacity="0.5" y="606" width="10" height="12" fill="url(#paint1_linear_70_2227)"/>
+<defs>
+<linearGradient id="paint0_linear_70_2227" x1="-2.01406e-07" y1="5.56391" x2="10" y2="5.56391" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1AC8C9"/>
+<stop offset="1" stop-color="#1AC8C9" stop-opacity="0.3"/>
+</linearGradient>
+<linearGradient id="paint1_linear_70_2227" x1="-2.01406e-07" y1="611.564" x2="10" y2="611.564" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1AC8C9"/>
+<stop offset="1" stop-color="#1AC8C9" stop-opacity="0.3"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/comments-audio.svg

@@ -0,0 +1,19 @@
+<svg width="95" height="76" viewBox="0 0 95 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 75H70.0722C70.7661 75 71.4104 74.6403 71.7746 74.0496L93.3529 39.0496C93.7496 38.4061 93.7496 37.5939 93.3529 36.9504L71.7746 1.9504C71.4104 1.35971 70.7661 1 70.0722 1H1" stroke="url(#paint0_linear_1211_1812)" stroke-opacity="0.25" stroke-width="2" stroke-linecap="square"/>
+<path d="M88.6566 37.462L68.2336 5.46201C68.05 5.1742 67.7321 5 67.3907 5H4C3.44772 5 3 5.44772 3 6V70C3 70.5523 3.44771 71 4 71H67.3907C67.7321 71 68.05 70.8258 68.2336 70.538L88.6566 38.538C88.866 38.2099 88.866 37.7901 88.6566 37.462Z" fill="url(#paint1_linear_1211_1812)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42 15.9199C37.4271 15.9199 33.72 19.627 33.72 24.1999V37.0799C33.72 41.6528 37.4271 45.3599 42 45.3599C46.5729 45.3599 50.28 41.6528 50.28 37.0799V24.1999C50.28 19.627 46.5729 15.9199 42 15.9199ZM28.2 35.2402C29.2162 35.2402 30.04 36.064 30.04 37.0802V38.0002C30.04 44.6056 35.3947 49.9602 42 49.9602C48.6053 49.9602 53.96 44.6056 53.96 38.0002V37.0802C53.96 36.064 54.7838 35.2402 55.8 35.2402C56.8162 35.2402 57.64 36.064 57.64 37.0802V38.0002C57.64 45.1135 52.8912 51.1177 46.391 53.0154C45.4605 53.2871 44.76 54.1035 44.76 55.0728V57.3202C44.76 58.8445 43.5243 60.0802 42 60.0802C40.4757 60.0802 39.24 58.8445 39.24 57.3202V55.0728C39.24 54.1035 38.5395 53.2871 37.609 53.0154C31.1088 51.1177 26.36 45.1135 26.36 38.0002V37.0802C26.36 36.064 27.1838 35.2402 28.2 35.2402Z" fill="url(#paint2_linear_1211_1812)"/>
+<defs>
+<linearGradient id="paint0_linear_1211_1812" x1="94" y1="38" x2="1" y2="38" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A0E2E8"/>
+<stop offset="1" stop-color="#A0E2E8" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1211_1812" x1="3" y1="39.7368" x2="89" y2="39.7368" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A0E2E8" stop-opacity="0"/>
+<stop offset="1" stop-color="#A0E2E8" stop-opacity="0.54"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1211_1812" x1="33.7391" y1="18.2834" x2="61.6756" y2="49.3155" gradientUnits="userSpaceOnUse">
+<stop offset="0.0704536" stop-color="white"/>
+<stop offset="0.870172" stop-color="#A0E2E8"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/comments-gohome.svg

@@ -0,0 +1,19 @@
+<svg width="55" height="44" viewBox="0 0 55 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 43H39.8859C40.5785 43 41.2218 42.6416 41.5864 42.0527L53.3483 23.0527C53.7476 22.4077 53.7476 21.5923 53.3483 20.9473L41.5864 1.94729C41.2218 1.35837 40.5785 1 39.8859 1H1" stroke="url(#paint0_linear_2627_6492)" stroke-opacity="0.25" stroke-linecap="square"/>
+<path d="M50.6627 21.466L39.2943 3.46601C39.1111 3.17591 38.7919 3 38.4488 3H3C2.44772 3 2 3.44772 2 4V40C2 40.5523 2.44771 41 3 41H38.4488C38.7919 41 39.1111 40.8241 39.2943 40.534L50.6627 22.534C50.8688 22.2078 50.8688 21.7922 50.6627 21.466Z" fill="url(#paint1_linear_2627_6492)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.8889 10L14 15.4762L22.8889 20.9524L22.8889 17.6667H24C27.0682 17.6667 29.5556 20.1184 29.5556 23.1429C29.5556 26.1673 27.0682 28.619 24 28.619H16.2222V33H24C29.5228 33 34 28.5868 34 23.1429C34 17.6989 29.5228 13.2857 24 13.2857H22.8889L22.8889 10Z" fill="url(#paint2_linear_2627_6492)"/>
+<defs>
+<linearGradient id="paint0_linear_2627_6492" x1="54" y1="22" x2="1" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A0E2E8"/>
+<stop offset="1" stop-color="#A0E2E8" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2627_6492" x1="2" y1="23" x2="51" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A0E2E8" stop-opacity="0"/>
+<stop offset="1" stop-color="#A0E2E8" stop-opacity="0.54"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2627_6492" x1="18.7181" y1="11.231" x2="36.0841" y2="30.6256" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.926959" stop-color="#A0E2E8"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/comments-icon1.svg

@@ -0,0 +1,28 @@
+<svg width="30" height="35" viewBox="0 0 30 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:multiply" opacity="0.8">
+<path d="M14.0535 0.0976562V3.87108C14.0535 3.87108 6.69528 3.87108 5.46892 3.87108C4.52557 3.87108 3.86522 4.62576 3.86522 5.38045C3.86522 6.13513 3.86522 16.229 3.86522 16.229H0.0917969C0.0917969 16.229 0.0917969 4.43709 0.0917969 4.24842C0.469139 1.41835 2.73319 0.191992 4.24256 0.0976562C5.28025 0.0976563 14.0535 0.0976562 14.0535 0.0976562Z" fill="#D7D8C7"/>
+<path d="M15.9438 0V3.67909C15.9438 3.67909 23.302 3.67909 24.5284 3.67909C25.4717 3.67909 26.1321 4.43377 26.1321 5.28279C26.1321 6.03748 26.1321 16.1314 26.1321 16.1314H29.9998C29.9998 16.1314 29.9998 4.33944 29.9998 4.15076C29.6225 1.3207 27.3584 0.0943355 25.8491 0C24.8114 0 15.9438 0 15.9438 0Z" fill="#D7D8C7"/>
+<path d="M14.056 34.2433V30.4699C14.056 30.4699 6.69782 30.4699 5.47146 30.4699C4.52811 30.4699 3.86776 29.7152 3.86776 28.8662C3.86776 28.1115 3.86776 18.0176 3.86776 18.0176H0C0 18.0176 0 29.8095 0 29.9982C0.377342 32.8283 2.6414 34.0546 4.15076 34.149C5.28279 34.2433 14.056 34.2433 14.056 34.2433Z" fill="#D7D8C7"/>
+<path d="M15.9438 34.2433V30.4699C15.9438 30.4699 23.302 30.4699 24.5284 30.4699C25.4717 30.4699 26.1321 29.7152 26.1321 28.8662C26.1321 28.1115 26.1321 18.0176 26.1321 18.0176H29.9998C29.9998 18.0176 29.9998 29.8095 29.9998 29.9982C29.6225 32.8283 27.3584 34.0546 25.8491 34.149C24.8114 34.2433 15.9438 34.2433 15.9438 34.2433Z" fill="#D7D8C7"/>
+<path d="M9.05526 10.8492C9.05526 11.5095 8.48925 12.0756 7.8289 12.0756H6.88554C6.22519 12.0756 5.65918 11.5095 5.65918 10.8492V6.79277C5.65918 6.13242 6.22519 5.56641 6.88554 5.56641H7.92323C8.58358 5.56641 9.14959 6.13242 9.14959 6.79277V10.8492H9.05526Z" fill="#D7D8C7"/>
+<path d="M9.52801 23.3004C9.52801 23.9607 8.962 24.5267 8.30165 24.5267H7.26396C6.60361 24.5267 6.0376 23.9607 6.0376 23.3004V19.2439C6.0376 18.5836 6.60361 18.0176 7.26396 18.0176H8.30165C8.962 18.0176 9.52801 18.5836 9.52801 19.2439V23.3004Z" fill="#D7D8C7"/>
+<path d="M23.8654 23.3004C23.8654 23.9607 23.2994 24.5267 22.6391 24.5267H21.6014C20.941 24.5267 20.375 23.9607 20.375 23.3004V19.2439C20.375 18.5836 20.941 18.0176 21.6014 18.0176H22.6391C23.2994 18.0176 23.8654 18.5836 23.8654 19.2439V23.3004Z" fill="#D7D8C7"/>
+<path d="M9.52801 27.4508C9.52801 28.1111 8.962 28.6771 8.30165 28.6771H7.26396C6.60361 28.6771 6.0376 28.1111 6.0376 27.4508V23.3943C6.0376 22.734 6.60361 22.168 7.26396 22.168H8.30165C8.962 22.168 9.52801 22.734 9.52801 23.3943V27.4508Z" fill="#D7D8C7"/>
+<path d="M23.8654 27.4508C23.8654 28.1111 23.2994 28.6771 22.6391 28.6771H21.6014C20.941 28.6771 20.375 28.1111 20.375 27.4508V23.3943C20.375 22.734 20.941 22.168 21.6014 22.168H22.6391C23.2994 22.168 23.8654 22.734 23.8654 23.3943V27.4508Z" fill="#D7D8C7"/>
+<path d="M24.3395 10.8492C24.3395 11.5095 23.7735 12.0756 23.1132 12.0756H22.0755C21.4151 12.0756 20.8491 11.5095 20.8491 10.8492V6.79277C20.8491 6.13242 21.4151 5.56641 22.0755 5.56641H23.1132C23.7735 5.56641 24.3395 6.13242 24.3395 6.79277V10.8492Z" fill="#D7D8C7"/>
+<path d="M23.0195 5.66113H7.4541V8.01952H23.0195V5.66113Z" fill="#D7D8C7"/>
+<path d="M14.0542 9.7168H6.979V12.0752H14.0542V9.7168Z" fill="#D7D8C7"/>
+<path d="M23.3022 9.7168H16.2271V12.0752H23.3022V9.7168Z" fill="#D7D8C7"/>
+<path d="M14.1487 9.7168H10.564V20.3767H14.1487V9.7168Z" fill="#D7D8C7"/>
+<path d="M19.5286 9.7168H15.9438V20.3767H19.5286V9.7168Z" fill="#D7D8C7"/>
+<path d="M11.1336 13.9614H6.13379V16.2255H11.1336V13.9614Z" fill="#D7D8C7"/>
+<path d="M23.867 13.9614H18.8672V16.2255H23.867V13.9614Z" fill="#D7D8C7"/>
+<path d="M13.0169 18.0176H7.54541V20.376H13.0169V18.0176Z" fill="#D7D8C7"/>
+<path d="M22.2644 18.0176H16.793V20.376H22.2644V18.0176Z" fill="#D7D8C7"/>
+<path d="M9.62284 7.64111H7.9248V10.3768H9.62284V7.64111Z" fill="#D7D8C7"/>
+<path d="M9.71854 19.8096H6.13379V26.8847H9.71854V19.8096Z" fill="#D7D8C7"/>
+<path d="M23.868 19.8096H20.2832V26.8847H23.868V19.8096Z" fill="#D7D8C7"/>
+<path d="M21.7905 26.3193H8.11182V28.6777H21.7905V26.3193Z" fill="#D7D8C7"/>
+<path d="M18.4887 22.2637H11.4136V24.4334H18.4887V22.2637Z" fill="#D7D8C7"/>
+</g>
+</svg>

src/components/Icons/svg/comments-left-bgc.svg

@@ -0,0 +1,9 @@
+<svg width="210" height="178" viewBox="0 0 210 178" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="210" height="178" fill="url(#paint0_linear_173_329)"/>
+<defs>
+<linearGradient id="paint0_linear_173_329" x1="210" y1="77.875" x2="1.87265e-06" y2="77.875" gradientUnits="userSpaceOnUse">
+<stop stop-color="#222222"/>
+<stop offset="1" stop-color="#222222" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/comments-write.svg

@@ -0,0 +1,19 @@
+<svg width="95" height="76" viewBox="0 0 95 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 75H70.0722C70.7661 75 71.4104 74.6403 71.7746 74.0496L93.3529 39.0496C93.7496 38.4061 93.7496 37.5939 93.3529 36.9504L71.7746 1.9504C71.4104 1.35971 70.7661 1 70.0722 1H1" stroke="url(#paint0_linear_1211_1810)" stroke-opacity="0.25" stroke-width="2" stroke-linecap="square"/>
+<path d="M88.6566 37.462L68.2336 5.46201C68.05 5.1742 67.7321 5 67.3907 5H4C3.44772 5 3 5.44772 3 6V70C3 70.5523 3.44771 71 4 71H67.3907C67.7321 71 68.05 70.8258 68.2336 70.538L88.6566 38.538C88.866 38.2099 88.866 37.7901 88.6566 37.462Z" fill="url(#paint1_linear_1211_1810)" fill-opacity="0.2"/>
+<path d="M59.5117 54.1562C59.5117 53.2734 58.7969 52.5546 57.9102 52.5546H25.9102C25.0273 52.5546 24.3086 53.2695 24.3086 54.1562C24.3086 55.039 25.0234 55.7577 25.9102 55.7577H57.9141C58.7969 55.7538 59.5117 55.039 59.5117 54.1562ZM56.1758 27.5898C56.1719 27.5859 56.1641 27.582 56.1602 27.5741L49.1523 20.5663C48.1094 19.6601 46.5234 19.6991 45.5313 20.6952C45.5273 20.6991 45.5234 20.707 45.5156 20.7109L27.2891 38.9335C26.9219 39.3007 26.7695 39.8046 26.8359 40.2851V48.4531C26.8359 48.5351 26.8438 48.6171 26.8555 48.6952C26.8633 48.7499 26.875 48.8007 26.8867 48.8515C26.9141 48.9531 26.9492 49.0507 26.9922 49.1445C27.0156 49.1913 27.0391 49.2382 27.0664 49.2812C27.0781 49.3046 27.0938 49.3241 27.1094 49.3476C27.1367 49.3906 27.168 49.4296 27.2031 49.4726C27.3438 49.6445 27.5195 49.7851 27.7187 49.8866L27.7656 49.9101C27.9688 50.0038 28.1953 50.0585 28.4375 50.0585H36.8086C37.3242 50.0585 37.7852 49.8124 38.0742 49.4335L56.3477 31.1601C57.207 30.1132 57.1484 28.5663 56.1758 27.5898Z" fill="url(#paint2_linear_1211_1810)"/>
+<defs>
+<linearGradient id="paint0_linear_1211_1810" x1="94" y1="38" x2="1" y2="38" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A0E2E8"/>
+<stop offset="1" stop-color="#A0E2E8" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1211_1810" x1="3" y1="39.7368" x2="89" y2="39.7368" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A0E2E8" stop-opacity="0"/>
+<stop offset="1" stop-color="#A0E2E8" stop-opacity="0.54"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1211_1810" x1="32.6132" y1="21.8343" x2="53.4392" y2="53.912" gradientUnits="userSpaceOnUse">
+<stop offset="0.0704536" stop-color="white"/>
+<stop offset="0.870172" stop-color="#A0E2E8"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Icons/svg/content-tip.svg

@@ -0,0 +1,22 @@
+<svg width="167" height="58" viewBox="0 0 167 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1791_899)">
+<path d="M10.36 20.72V37.4C15.6 32.96 17.04 27.52 17.48 20.72H10.36ZM34.12 16.68L39.36 20.8C39.12 21.12 38.6 21.48 37.8 21.64V43.24C37.8 47.04 36.8 49.2 29.96 49.84C29.72 47.92 29.4 46.6 28.48 45.72C27.56 44.8 26.48 44.12 23.68 43.64V43.16C23.68 43.16 29.48 43.52 30.96 43.52C31.68 43.52 31.92 43.16 31.92 42.6V20.72H23.28C23.12 22.6 22.88 24.36 22.44 26.04C35.16 30.2 31.2 40.16 26.04 36.44C25.36 33.52 23.72 30.36 21.92 27.72C20.32 32.12 17.16 35.6 10.52 38.08L10.36 37.84V47.64C10.36 48.36 7.96 49.72 5.48 49.72H4.56V17.16L10.8 19.6H17.52C17.64 17.16 17.68 14.56 17.68 11.8L25.12 12.32C25.04 12.92 24.64 13.36 23.68 13.48C23.6 15.64 23.52 17.68 23.4 19.6H31.52L34.12 16.68ZM72.72 18.52H48.88C49.24 21.48 48.24 23.56 46.76 24.48C45.36 25.36 43.2 24.88 42.6 23.12C42.08 21.44 43.08 20.16 44.48 19.52C45.8 18.8 47.44 16.96 47.4 14.96H47.88C48.24 15.8 48.48 16.64 48.68 17.4H59.4C59.24 17.32 59.12 17.24 58.96 17.16C58.8 15.24 57.68 13.28 56.36 12.2L56.6 12C65.4 10.92 65.4 15.88 62.76 17.4H72.36L75.08 14.64L79.84 19.12C79.52 19.48 79.12 19.6 78.28 19.64C77 20.72 74.96 22.08 73.16 22.96C77.68 25.92 75.52 30.96 71.44 29.44C69.72 26.48 66.24 23.16 63.36 21.28L63.64 21C67.52 20.88 70.28 21.48 72.2 22.44C72.4 21.24 72.6 19.76 72.72 18.52ZM44.88 31L44.56 30.6C48.08 27.68 51.36 23 52.8 19.68L59.08 22.4C58.92 22.8 58.56 23.08 57.64 23.04C54.92 26.04 49.96 29.36 44.88 31ZM65.84 36.84L68.2 34.28C65.84 32.32 63.96 29.96 62.72 27.28C60.64 30.2 56.88 33.12 52.52 35.48L56.08 36.84H65.84ZM55.8 45.48H66.2V37.96H55.8V45.48ZM57.44 23.88L65.4 25.88C65.24 26.44 64.76 26.68 63.32 26.84C67.08 30.36 74.8 32.32 80.28 32.8V33.44C78 34.2 76.6 36.72 76.36 38.8C74.32 38.08 72.36 37.16 70.6 36L73.2 37.96C73 38.24 72.6 38.52 71.88 38.68V48.16C71.84 48.48 69.04 49.48 67.2 49.48H66.2V46.6H55.8V48.12C55.8 48.6 53.28 49.84 51 49.84H50.2V36.68C47.6 37.92 44.88 38.96 42.2 39.68L41.96 39.24C49 35.6 55.96 28.64 57.44 23.88ZM97.16 27.48L97.24 27.84C95.92 28.88 94.16 30.16 91.88 31.68V43.68C91.88 47.36 91.12 49.32 85.52 49.8C85.44 48.08 85.28 46.8 84.76 45.96C84.28 45.16 83.6 44.6 81.88 44.24V43.72C81.88 43.72 85 43.92 85.76 43.92C86.32 43.92 86.48 43.76 86.48 43.32V35.12L84.76 36.16C84.56 36.68 84.08 37.16 83.56 37.28L81.6 30.64C82.64 30.48 84.36 30.16 86.48 29.76V22.52H82.36L82.04 21.4H86.48V11.76L93.36 12.4C93.28 13 92.88 13.4 91.88 13.56V21.08L93.88 17.76C93.88 17.76 96.44 20.28 97.8 21.88C97.68 22.32 97.28 22.52 96.72 22.52H91.88V28.64C93.6 28.28 95.4 27.88 97.16 27.48ZM103.52 25.24H111.24V21.16H103.52V25.24ZM111.24 16H103.52V20.04H111.24V16ZM110.28 38.12V43.6C111.08 43.64 111.92 43.64 112.84 43.64C114.56 43.64 118.6 43.64 120.56 43.6V44.04C119.04 44.44 118.36 46.52 118.4 48.88H112.64C106.56 48.88 103 47.24 101.2 41.16C99.32 45.56 96.44 48.16 92.44 49.92L92.04 49.56C95.32 45.64 97.24 40.24 97.16 33.52L104.4 34.76C104.24 35.32 103.8 35.68 102.88 35.76C102.56 37.28 102.16 38.68 101.68 39.92C102.52 41.12 103.56 41.96 104.8 42.52V31.52H96.12L95.8 30.4H112.36L114.28 27.88C113.6 28.08 112.84 28.2 112.2 28.2H111.24V26.36H103.52V27.44C103.52 27.96 101.12 29.16 98.84 29.16H98.04V12.68L103.72 14.88H110.84L113.28 12.2L118.36 16.04C118.12 16.36 117.6 16.72 116.76 16.88V26.76C116.76 26.88 116.36 27.12 115.76 27.36C116.8 28.16 118.72 29.72 120.04 30.88C119.92 31.32 119.48 31.52 118.92 31.52H110.28V37H111.72L114.44 33.24C114.44 33.24 117.52 35.76 119.32 37.48C119.2 37.92 118.76 38.12 118.2 38.12H110.28ZM145.36 35.36H139.92C138.68 37.12 137.36 39 136.24 40.44C138.4 40.56 140.36 40.76 142.16 40.96C143.6 39.36 144.64 37.52 145.36 35.36ZM147.6 28.4H150.08V21.76H147.6V28.4ZM131.84 21.76V28.4H134.28V21.76H131.84ZM142.16 21.76H139.72V28.4H142.16V21.76ZM139.72 16.48V20.64H142.16V16.48H139.72ZM155.68 22.68V30.44C155.68 30.52 155.4 30.68 154.96 30.84C155.48 31.24 158.2 33.24 159.92 34.72C159.8 35.16 159.36 35.36 158.76 35.36H152C151 37.96 149.76 40.12 148.16 41.92C162.72 45.08 156.6 51.16 152.16 49.16C150.24 47.88 147.52 46.48 144.16 45.16C139.68 47.76 133.08 49.12 122.8 49.76L122.64 49.24C130.08 47.84 135.48 46.08 139.28 43.44C136.24 42.48 132.84 41.6 129.12 40.88C130.2 39.6 131.68 37.48 133.08 35.36H122.52L122.2 34.24H133.8C135 32.36 136.04 30.64 136.56 29.56L144.04 31.12C143.92 31.6 143.56 32.04 142.12 32.12C141.72 32.72 141.2 33.44 140.68 34.24H152.04L154.72 30.92C153.72 31.24 152.2 31.6 151.04 31.6H150.08V29.52H131.84V30.48C131.84 30.96 129.32 32.16 127 32.16H126.24V18.4L132.2 20.64H134.28V16.48H122.72L122.4 15.36H151.12L154.08 11.6C154.08 11.6 157.44 14.12 159.44 15.84C159.32 16.28 158.88 16.48 158.28 16.48H147.6V20.64H149.68L152.12 17.96L157.28 21.8C157.04 22.12 156.52 22.48 155.68 22.68Z" fill="url(#paint0_linear_1791_899)" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_1791_899" x="0.560059" y="8.92004" width="166.16" height="48.24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1791_899"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1791_899" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1791_899" x1="81" y1="12.7759" x2="81" y2="58.2391" gradientUnits="userSpaceOnUse">
+<stop offset="0.217079" stop-color="#F3DAAB"/>
+<stop offset="0.668468" stop-color="#F3DAAB" stop-opacity="0.3"/>
+<stop offset="0.903824" stop-color="#F3DAAB" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>