小窗

闫增涛

2024-12-31 a8da6c44895f90bc6d33df129bccd424bf73be3e

 src/books/aviationEtiquette/view/components/chpater002.vue

@@ -627,6 +627,32 @@
          <p>
            牧童结：丝巾对折呈倒三角形，再从长端叠加呈3～4个褶皱，丝巾末端与平结系法一致，系在脖颈处整理。
          </p>
          <div class="bk-video fl">
            <p class="bj4-qjms fl al-c"><span class="span-text-video">视频库</span><span class="span-svg"><svg t="1729840629103"
                  class="icon" viewBox="0 0 1365 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34778"
                  xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="40">
                  <path
                    d="M531.117831 720.79677l341.333334-170.641145a42.673047 42.673047 0 0 0 0-76.566472L531.117831 303.20323a42.673047 42.673047 0 0 0-61.814665 38.130103v341.333334a42.673047 42.673047 0 0 0 61.814665 38.130103zM1237.724282 0H127.612523A128.376452 128.376452 0 0 0 0.001736 128.580629V895.317282a128.019142 128.019142 0 0 0 127.610787 128.682718h1110.111759a128.427496 128.427496 0 0 0 127.610787-128.682718V128.580629a127.968097 127.968097 0 0 0-127.610787-128.580629zM255.988974 895.572504a42.46887 42.46887 0 0 1-43.081401 43.081402H128.429232a42.46887 42.46887 0 0 1-43.081402-43.081402V811.094163a42.417826 42.417826 0 0 1 43.081402-43.132446h84.580429a42.417826 42.417826 0 0 1 42.979313 43.132446z m0-341.333333a42.46887 42.46887 0 0 1-43.081401 42.979313H128.429232a42.46887 42.46887 0 0 1-43.081402-43.081402V469.607697a42.366781 42.366781 0 0 1 43.081402-43.081402h84.580429A42.417826 42.417826 0 0 1 255.988974 469.607697z m0-341.333334a42.46887 42.46887 0 0 1-43.081401 43.081402H128.429232a42.46887 42.46887 0 0 1-43.081402-43.081402V128.427496a42.366781 42.366781 0 0 1 43.081402-43.081402h84.580429a42.417826 42.417826 0 0 1 42.979313 43.081402z m768.012762 725.748069H341.335069V85.346094H1023.950691v853.307812z m255.987238-43.081402a42.46887 42.46887 0 0 1-43.132446 43.081402h-84.529385a42.417826 42.417826 0 0 1-43.030357-43.081402V811.094163a42.46887 42.46887 0 0 1 43.081401-43.132446h84.58043a42.46887 42.46887 0 0 1 43.030357 43.132446z m0-341.333333a42.46887 42.46887 0 0 1-43.132446 43.081401h-84.529385a42.417826 42.417826 0 0 1-43.030357-43.081401V469.607697a42.417826 42.417826 0 0 1 43.081401-43.081402h84.58043a42.417826 42.417826 0 0 1 43.030357 43.081402z m0-341.333334a42.46887 42.46887 0 0 1-43.132446 43.081402h-84.529385a42.417826 42.417826 0 0 1-43.030357-43.081402V128.427496a42.417826 42.417826 0 0 1 43.081401-43.081402h84.58043a42.417826 42.417826 0 0 1 43.030357 43.081402z"
                    fill="#92A1CB" p-id="34779"></path>
                </svg></span></p>
            <div class="fl jc-fs fw-w">
              <div style="width: 200px; height: auto; margin: 0 5px;" v-for="(item, index) in chapter002.videoMd5"
                :key="index">
                <video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-orientation="h5"
                  x5-video-player-fullscreen="true" x5-playsinline="" controls controlslist="nodownload"
                  class="video-border w100" :src="item.handleMd5"></video>
                <div class="fl al-c jc-c">
                  <p class="td-0" style="font-size: 12px;">微课小课堂：{{ item.name }}</p>
                  <el-tooltip class="item" effect="dark" :content="item.isCollectVideo ? '点击取消' : '点击收藏'"
                    placement="top-start">
                    <img
                      :src="collectResourceList.findIndex(citem => citem.id == item.md5) > -1 ? collectCheck : collectImg"
                      alt="" class="collect-btn1" @click="handleCollect(item)" />
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
          <h6 id="f009">2.领带佩戴规范</h6>
          <p>
            不管是制服还是一般商务西服，首先要与领带搭配。领带也是男士在仪表方面的一个标志，配上合体的西服，可以使穿者显得潇洒、精神、绅士、稳重，同时也体现出对场合的重视。
@@ -979,6 +1005,25 @@
          </p>
          <h5 id="e058">（三）职业妆程序</h5>
          <p>职业妆的化妆程序与日常妆一致，请查看视频。</p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：日常妆步骤</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'
                " placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == 'dfa8717a72ef7a1e6349b6ba21455739'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-01')" />
              </el-tooltip>
            </p>
          </div>
          <h4 id="d047">六、男士面部化妆</h4>
          <p>
            通过遮瑕和修容，将面部肤色调整得更加均匀，使气色红润，展现最好的精神面貌。遮瑕主要掩盖脸部瑕疵，使整个面部干净清爽；修容主要是增加面部立体感；眉的修饰主要是去除杂眉，调整和修补眉形（见图2-1-17）。
@@ -1043,6 +1088,25 @@
          <p class="block">
            卸除粉底等脸部的底妆时，可用沾有卸妆液的棉片分别按额头、鼻子、脸颊、口周的顺序来卸除。必须一遍一遍地卸除，并按面部肌肉的纹理及走向擦拭。
          </p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathTwo" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：卸妆</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo01 ? '点击取消' : '点击收藏'
                " placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '1f4b5a2bee9544f3b357f4cdf7d09e87'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-02')" />
              </el-tooltip>
            </p>
          </div>
        </div>
      </div>
    </div>
@@ -1271,6 +1335,25 @@
          <p>
            ⑧检查：正面无碎发，纹理整齐，表面光滑；侧面发夹对称，发髻底端不低于两耳垂；背面发髻圆润、饱满，直径不小于8cm。
          </p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathThree" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：气质型发型</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo02 ? '点击取消' : '点击收藏'
                " placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '26aaec2c0eb64bed629e13f68b9ce848'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-03')" />
              </el-tooltip>
            </p>
          </div>
          <p>
            （2）优雅型。优雅型发型亦是斜刘海发型，即前额留有刘海修饰，根据脸部长度适当调整头顶弧度及刘海区域，刘海为圆弧形，发髻为芭蕾式或发髻式，前后左右碎发应以发胶和发夹固定，发夹、皮筋、发网均为黑色，头发上发夹不超过四个。适合椭圆形脸、长方形脸及上庭偏长偏宽的脸型。
          </p>
@@ -1311,6 +1394,25 @@
          <p>
            ⑨检查：正面刘海区纹理整齐，表面光滑，刘海最低点与眉尾有一指至两指宽距离。侧面无碎发，分缝线不外露。发髻圆润、饱满，直径不小于8cm。
          </p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathFour" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：优雅型发型</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo03 ? '点击取消' : '点击收藏'
                " placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == 'e5ac247c68c93dbb8fb3eb56ea4bb3aa'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-04')" />
              </el-tooltip>
            </p>
          </div>
          <p class="td-0 mb-10 mt-10"><span class="bj2">·礼之实践·</span></p>
          <p class="center">
            <img class="img-0" alt="" src="../../assets/images/0077-2.jpg" />
@@ -2183,6 +2285,9 @@
      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      videoPathOne: "",
      videoPathTwo: "",
      videoPathThree: "",
      videoPathFour: "",
      collectResourceList: [],
      questionData: {
        isComplete: false,
@@ -2388,20 +2493,40 @@
          {
            isCollectVideo: false,
            handleMd5: "",
            md5: "7454A10BD25ED828FF31D0702DA63D55",
            name: "什么是心理健康",
            md5: "965022b1a3d52fc4d943b7762c5f8041",
            name: "平结",
          },
          {
            isCollectVideo: false,
            handleMd5: "",
            md5: "E4AC28F178D660E96355C17E6F283E66",
            name: "心理健康的10项标准",
            md5: "d4e22792df09639f5c30b40be57f220c",
            name: "百褶花结",
          },
          {
            isCollectVideo: false,
            handleMd5: "",
            md5: "1d674e01378bb9ddf1dff6f905073b80",
            name: "百折扇结",
          },
          {
            isCollectVideo: false,
            handleMd5: "",
            md5: "005f3af9c76e4d807280f29aa92c0951",
            name: "牧童结",
          },
          {
            isCollectVideo: false,
            handleMd5: "",
            md5: "186c971393948f45d0df637e1fa1a7d7",
            name: "领带系法",
          },
        ],
      },
      chapterData: {
        isCollectVideo: false,
        isCollectVideo01: false,
        isCollectVideo02: false,
        isCollectVideo03: false,
      },
    };
  },
@@ -2434,10 +2559,16 @@
  methods: {
    async getVidoePath() {
      this.videoPathOne = await getResourcePath(
        "f230fd8fd7952a4ad4dd05d94df7e797"
        "dfa8717a72ef7a1e6349b6ba21455739"
      );
      this.videoPathTwo = await getResourcePath(
        "700cfdb8b85b372045b1e97e3356ae3a"
        "1f4b5a2bee9544f3b357f4cdf7d09e87"
      );
      this.videoPathThree = await getResourcePath(
        "26aaec2c0eb64bed629e13f68b9ce848"
      );
      this.videoPathFour = await getResourcePath(
        "e5ac247c68c93dbb8fb3eb56ea4bb3aa"
      );
      for (let index = 0; index < this.chapter002.videoMd5.length; index++) {
        const item = this.chapter002.videoMd5[index];
@@ -2455,13 +2586,13 @@

    handleChapterData() {
      localStorage.setItem(
        "civilAviatyonSevervices-book-chapter02-Data",
        "aviationEtiquette-book-chapter02-Data",
        JSON.stringify(this.chapterData)
      );
    },
    handleChapter002() {
      localStorage.setItem(
        "civilAviatyonSevervices-book-chapter002",
        "aviationEtiquette-book-chapter002",
        JSON.stringify(this.chapter002)
      );
    },
@@ -2485,24 +2616,44 @@
        e.isCollectVideo = !e.isCollectVideo;
      } else if (e == "video-01") {
        this.handleCollectResource(
          "f230fd8fd7952a4ad4dd05d94df7e797",
          "f230fd8fd7952a4ad4dd05d94df7e797",
          "dfa8717a72ef7a1e6349b6ba21455739",
          "dfa8717a72ef7a1e6349b6ba21455739",
          "",
          "视频",
          "bits",
          "视频：心理学的流派"
          "视频：日常妆步骤"
        );
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
      } else if (e == "video-02") {
        this.handleCollectResource(
          "700cfdb8b85b372045b1e97e3356ae3a",
          "700cfdb8b85b372045b1e97e3356ae3a",
          "1f4b5a2bee9544f3b357f4cdf7d09e87",
          "1f4b5a2bee9544f3b357f4cdf7d09e87",
          "",
          "视频",
          "bits",
          "视频：心理学的研究内容"
          "视频：卸妆"
        );
        this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01;
      } else if (e == "video-03") {
        this.handleCollectResource(
          "26aaec2c0eb64bed629e13f68b9ce848",
          "26aaec2c0eb64bed629e13f68b9ce848",
          "",
          "视频",
          "bits",
          "视频：气质型发型"
        );
        this.chapterData.isCollectVideo02 = !this.chapterData.isCollectVideo01;
      }else if (e == "video-04") {
        this.handleCollectResource(
          "e5ac247c68c93dbb8fb3eb56ea4bb3aa",
          "e5ac247c68c93dbb8fb3eb56ea4bb3aa",
          "",
          "视频",
          "bits",
          "视频：优雅型发型"
        );
        this.chapterData.isCollectVideo03 = !this.chapterData.isCollectVideo01;
      }
      this.handleChapter002();
      this.handleChapterData();