chenzimin2
/
yapianbowuguan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title></title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <style>
      body {
        margin: 0;
      }
      div {
        box-sizing: border-box;
      }

      ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 3px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }

      ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px transparent;
        background: #f0d89c;
      }

      ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px transparent;
        border-radius: 10px;
        background: transparent;
      }

      #app {
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
      }

      .search {
        width: 60%;
        height: 100%;
        background: linear-gradient(
          89deg,
          rgba(158, 135, 90, 0.35) 22%,
          rgba(141, 127, 100, 0.56) 80%,
          rgba(141, 127, 100, 0.56) 100%
        );
        backdrop-filter: blur(20px);
        padding: 15px 15px;
        border-radius: 10px;
        position: relative;
      }

      .close-box {
        width: 25px;
        height: 25px;
        position: absolute;
        top: 2px;
        right: 2px;
        cursor: pointer;
      }

      .search-box {
        width: 100%;
        height: 30px;
        border-radius: 5px;
        background: #ffffff47;
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .tips {
        width: 100%;
        display: flex;
        justify-content: left;
        margin-top: 5px;
      }

      .tips-item {
        margin-left: 10px;
        font-size: 12px;
        color: #ffffff80;
      }

      .welcome-title {
        font-size: 18px;
        color: #ffffff;
        font-weight: bold;
        margin-top: 10px;
      }

      .search-content {
        border: none;
        width: 75%;
        height: 100%;
        background: none;
        line-height: 45px;
        font-size: 14px;
        color: white;
      }
      input:focus {
        outline: none;
      }
      input::placeholder {
        color: rgb(201, 201, 201);
      }

      .content-right {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .line {
        height: 25px;
        width: 2px;
        background: linear-gradient(transparent, white, transparent);
        margin-right: 10px;
      }

      .search-icon {
        height: 20px;
        width: 20px;
      }

      .options {
        width: 100%;
        display: flex;
        margin-top: 5px;
        justify-content: space-around;
      }

      .options-item {
        color: white;
        font-size: 15px;
        line-height: 1.5rem;
        cursor: pointer;
      }

      .list-box {
        width: 100%;
        height: 80%;
        overflow: auto;
      }
      .list-box-item {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
      }

      .item-title {
        font-size: 16px;
        font-weight: bold;
        color: white;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .item-disc {
        font-size: 13px;
        color: #ffffff75;
        min-width: 20%;
      }

      .dialog {
        /* width: 5%;
        height: 20%;
        position: relative; */
      }
      /* //制作尖角原理：把容器的长和宽都设置为零，然后利用其border制作小三角，两个三角形重叠，一个与背景颜色相同，另一个与边框颜色相同，即可展示出尖角的效果 */
      .dialog:before {
        content: "";
        width: 0;
        height: 0;
        border-bottom: 40px solid rgba(141, 127, 100, 0.56);
        border-right: 30px solid #fff0;
        backdrop-filter: blur(20px);
      }
      /* .dialog:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 4.3em;
        left: 0;
        border-bottom: 2rem solid #fff;
        border-right: 5rem solid #fff0;
      } */

      img {
        height: 100%;
      }
    </style>
    <style></style>
  </head>

  <body>
    <div id="app">
      <!-- 搜索框 -->
      <div
        class="search"
        v-if="isShow"
        :style="{padding: clientWidth < 700 ? '10px 10px':''}"
      >
        <!-- <div class="close-box" @click="() => {isShow = false}">
          <img src="./img/icon/close.png" alt="" />
        </div> -->
        <!-- 搜索框 -->
        <div
          class="search-box"
          :style="{height: clientWidth < 700 ? '25px':''}"
        >
          <input
            class="search-content"
            type="text"
            placeholder="请输入关键字"
            :value="searchKey"
            v-model="searchKey"
            @input="searchFu"
          />
          <!-- <input class="search-content">{{searchKey}}</input> -->
          <div class="content-right">
            <div class="line"></div>
            <img
              class="search-icon"
              src="./img/icon/close.png"
              alt=""
              @click="() => {isShow = false}"
            />
          </div>
        </div>
        <!-- 文物 知识选择 -->
        <div class="options" :style="{marginTop: clientWidth < 700 ? '2px':''}">
          <div
            class="options-item"
            @click="()=>{optionValue = '文物'}"
            :style="{color: optionValue == '文物' ? '#f0d89c' : '#fff',fontSize: clientWidth < 700 ? '13px':''}"
          >
            文物
          </div>
          <div
            class="options-item"
            @click="()=>{optionValue = '知识'}"
            :style="{color: optionValue == '文物' ? '#f0d89c' : '#fff',fontSize: clientWidth < 700 ? '13px':''}"
          >
            知识
          </div>
        </div>
        <div class="list-box">
          <div
            class="list-box-item"
            v-for="(item, index) in showList"
            :style="{borderBottom: index != showList.length - 1? '1px #ffffff75 dashed': '',height: clientWidth < 700 ?'25px':''}"
            @click="goDetail(optionValue == '知识' ? item.channelId : item.id)"
          >
            <span
              class="item-title"
              :title="item.name"
              :style="{fontSize: clientWidth < 700 ? '12px':''}"
              >{{item.name}}</span
            >
            <!-- <div class="item-disc">{{`[${optionValue}]`}}</div> -->
          </div>
        </div>
      </div>
      <div class="dialog" v-if="isShow"></div>
      <div class="figure-box">
        <img src="./img/yb/yb.png" alt="" @click="() => {isShow = !isShow}" />
      </div>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            title: "导向",
            isShow: false,
            searchKey: "",
            optionValue: "文物",
            culturalsList: [],
            showList: [],
            timer: null,
            isFocus: true,
            keyTips: ["海战博物馆", "虎门硝烟", "鸦片战争"],
            clientWidth: 0,
          };
        },
        mounted() {
          console.log(
            "父窗口宽度",
            window.parent.document.documentElement.clientWidth
          );
          window.onresize = () => {
            return (() => {
              this.clientWidth =
                window.parent.document.documentElement.clientWidth;
            })();
          };
        },
        beforCreat() {},
        created() {
          this.getCulturalRelics();
        },
        watch: {
          optionValue(newValue, oldValue) {
            if (newValue == "文物") {
              this.getCulturalRelics(this.searchKey);
            } else if (newValue == "知识") {
              this.getKnows(this.searchKey);
            }
          },
          isShow(newValue, oldValue) {
            var appbox = document.getElementById("app");
            if (newValue) {
              // pc端
              if (this.clientWidth > 700) {
                window.parent.postMessage(
                  {
                    params: {
                      num: "26",
                    },
                  },
                  "*"
                );
              } else {
                window.parent.postMessage(
                  {
                    params: {
                      num: "80",
                    },
                  },
                  "*"
                );
              }
            } else {
              if (this.clientWidth > 700) {
                window.parent.postMessage(
                  {
                    params: {
                      num: "10",
                    },
                  },
                  "*"
                );
              } else {
                window.parent.postMessage(
                  {
                    params: {
                      num: "20",
                    },
                  },
                  "*"
                );
              }
            }
          },
        },
        methods: {
          // 进入详情链接
          goDetail(id) {
            console.log(id);
            window.open(
              `/pc/#/${this.optionValue == "文物" ? "goods" : "know"}?id=${id}`
            );
          },
          // 搜索防抖计时器清除
          clearTimer() {
            if (this.timer) {
              clearTimeout(this.timer);
            }
          },
          // 进行搜索
          searchFu() {
            this.clearTimer();
            this.isFocus = true;
            this.timer = setTimeout(() => {
              if (this.optionValue == "文物") {
                this.getCulturalRelics(this.searchKey);
              } else if (this.optionValue == "知识") {
                this.getKnows(this.searchKey);
              }
            }, 500);
          },
          // 获取文物链接
          getCulturalRelics(searchKey) {
            let _this = this;
            _this.showList = [];
            const data = {
              dictAge: "",
              dictTexture: "",
              pageNum: 0,
              pageSize: 10000000,
              searchKey: searchKey,
              type: "",
            };
            axios
              .post(`https://ypbwg.4dage.com/api/show/goods/pageList`, data)
              .then(function (resp) {
                _this.showList = resp.data.data.records;
              });
          },
          // 获取知识链接
          getKnows(searchKey) {
            let _this = this;
            _this.showList = [];
            const data = {
              pageNum: 0,
              pageSize: 10000000,
              searchKey: searchKey,
              tagType: "",
            };
            axios
              .post(`https://ypbwg.4dage.com/api/show/getKnowledge`, data)
              .then(function (resp) {
                _this.showList = resp.data.data.records;
              });
          },
        },
      });
    </script>
  </body>
</html>