banma/pages/index/index.vue

<template>
  <view class="">
    <view class="btn" @click="takephotos"> 点击保存 </view>
    <view class="swiperBox">
      <swiper
        duration="100"
        :style="{ height: swiperHeight + 'px' }"
        @change="swiperChange"
        :current="current"
        :indicator-dots="false"
        :autoplay="false"
        :interval="3000"
        :duration="1000"
      >
        <swiper-item v-for="(item, index) in list" :key="index">
          <view
            class="swiper-item swiper-itemcopy"
            :id="'copyswiperItem' + index"
          >
            <view
              class="titleBox"
              :style="{ background: 'url(' + BASE_URL + jt_bg1 + ')' }"
            >
              <!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
              <limeQrcodeVue
                ref="qrcodeRef"
                :value="
                  BASE_URL1 +
                  `/h5/#/pages/deal/product_info?id=${item.id}&rand_num=${item.rand_num}`
                "
                size="112rpx"
              ></limeQrcodeVue>
              <view class="title">
                <p>{{ item.title1 }}</p>
                <p>{{ item.title2 }}</p>
                <p class="warn">{{ item.title3 }}</p>
              </view>
              <!-- <image class="jtbj" src="../../static/logo.png" mode=""></image> -->
            </view>
            <view
              class="content"
              :style="{ background: 'url(' + BASE_URL + jt_bg2 + ')' }"
            >
              <view class="" :id="'copycontent' + index"> </view>
              <view
                class="watermark"
                v-if="
                  (item.watermark_info && item.watermark_info.type == 1) ||
                  (item.watermark_info && item.watermark_info.type == 3)
                "
              >
                <view
                  v-for="it in 9"
                  class=""
                  :style="{
                    transform: 'rotate(' + item.watermark_info.angle + 'deg)',
                    opacity: (100 - item.watermark_info.opacity * 1) * 0.01,
                    color: item.watermark_info.color,
                    marginTop: item.watermark_info.hh + 'px',
                    marginBottom: item.watermark_info.hh + 'px',
                    marginLeft: item.watermark_info.ww + 'px',
                    marginRight: item.watermark_info.ww + 'px',
                    fontSize: item.watermark_info.text_font + 'px',
                    fontWeight: item.watermark_info.bold == 1 ? 'bold' : '',
                    fontFamily:
                      item.watermark_info.typeface == 1
                        ? 'typeface1'
                        : item.watermark_info.typeface == 2
                        ? 'typeface2'
                        : item.watermark_info.typeface == 3
                        ? 'typeface3'
                        : item.watermark_info.typeface == 4
                        ? 'typeface4'
                        : item.watermark_info.typeface == 5
                        ? 'typeface5'
                        : item.watermark_info.typeface == 6
                        ? 'typeface6'
                        : '',
                  }"
                >
                  <image
                    :src="BASE_URL + item.watermark_info.image"
                    mode=""
                    v-if="
                      item.watermark_info.image && item.watermark_info.type == 1
                    "
                  ></image>
                  <text
                    v-if="
                      item.watermark_info.water_text &&
                      item.watermark_info.type == 3
                    "
                    >{{ item.watermark_info.water_text }}</text
                  >
                </view>
              </view>
              <view
                class="watermark1"
                :style="{
                  left:
                    item.watermark_info.waterPos == 0
                      ? 0 + item.watermark_info.xx + 'px'
                      : item.watermark_info.waterPos == 1
                      ? 0 + item.watermark_info.xx + 'px'
                      : item.watermark_info.waterPos == 4
                      ? 0 + item.watermark_info.voffset + 'px'
                      : item.watermark_info.waterPos == 7
                      ? 0 + item.watermark_info.xx + 'px'
                      : item.watermark_info.waterPos == 2
                      ? 'calc( 40%' + ' + ' + item.watermark_info.xx + 'px )'
                      : item.watermark_info.waterPos == 5
                      ? 'calc( 40%' +
                        ' + ' +
                        item.watermark_info.voffset +
                        'px )'
                      : item.watermark_info.waterPos == 8
                      ? 'calc( 40%' + ' + ' + item.watermark_info.xx + 'px )'
                      : '',
                  top:
                    item.watermark_info.waterPos == 0
                      ? 0 + item.watermark_info.yy + 'px'
                      : item.watermark_info.waterPos == 1
                      ? 0 + item.watermark_info.yy + 'px'
                      : item.watermark_info.waterPos == 2
                      ? 0 + item.watermark_info.yy + 'px'
                      : item.watermark_info.waterPos == 3
                      ? 0 + item.watermark_info.yy + 'px'
                      : item.watermark_info.waterPos == 4
                      ? '40%'
                      : item.watermark_info.waterPos == 5
                      ? '40%'
                      : item.watermark_info.waterPos == 6
                      ? '40%'
                      : '',
                  right:
                    item.watermark_info.waterPos == 3
                      ? 0 + item.watermark_info.xx + 'px'
                      : item.watermark_info.waterPos == 6
                      ? 0 + item.watermark_info.waterPos + 'px'
                      : item.watermark_info.waterPos == 9
                      ? 0 + item.watermark_info.xx + 'px'
                      : '',
                  bottom:
                    item.watermark_info.waterPos == 7
                      ? 0 + item.watermark_info.xx + 'px'
                      : item.watermark_info.waterPos == 8
                      ? 0 + item.watermark_info.ww + 'px'
                      : item.watermark_info.waterPos == 9
                      ? 0 + item.watermark_info.xx + 'px'
                      : '',
                  fontWeight: item.watermark_info.bold == 1 ? 'bold' : '',
                  fontFamily:
                    item.watermark_info.typeface == 1
                      ? 'typeface1'
                      : item.watermark_info.typeface == 2
                      ? 'typeface2'
                      : item.watermark_info.typeface == 3
                      ? 'typeface3'
                      : item.watermark_info.typeface == 4
                      ? 'typeface4'
                      : item.watermark_info.typeface == 5
                      ? 'typeface5'
                      : item.watermark_info.typeface == 6
                      ? 'typeface6'
                      : '',
                }"
                v-if="
                  (item.watermark_info && item.watermark_info.type == 2) ||
                  (item.watermark_info && item.watermark_info.type == 4)
                "
              >
                <view
                  class=""
                  :style="{
                    transform: 'rotate(' + item.watermark_info.angle + 'deg)',
                    color: `rgba(${hexToRgb(item.watermark_info.color).rgb},${
                      (100 - item.watermark_info.opacity * 1) * 0.01
                    })`,
                    fontSize: item.watermark_info.text_font + 'px',
                  }"
                >
                  <image
                    :src="BASE_URL + item.watermark_info.image"
                    mode=""
                    v-if="
                      item.watermark_info.image && item.watermark_info.type == 2
                    "
                  ></image>
                  <text
                    v-if="
                      item.watermark_info.water_text &&
                      item.watermark_info.type == 4
                    "
                    >{{ item.watermark_info.water_text }}</text
                  >
                </view>
              </view>
            </view>
          </view>
          <view class="swiper-item" :id="'swiperItem' + index">
            <view
              class="titleBox"
              :style="{ background: 'url(' + BASE_URL + jt_bg1 + ')' }"
            >
              <!-- <view class="titleBox"> -->
              <!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
              <limeQrcodeVue
                ref="qrcodeRef"
                :value="
                  BASE_URL1 +
                  `/h5/#/pages/deal/product_info?id=${item.id}&rand_num=${item.rand_num}`
                "
                size="112rpx"
              ></limeQrcodeVue>
              <view class="title">
                <p>{{ item.title1 }}</p>

                <p>{{ item.title2 }}</p>
                <p class="warn">{{ item.title3 }}</p>
              </view>
            </view>
            <view
              class="content"
              v-if="item.detail"
              :style="{ background: 'url(' + BASE_URL + jt_bg2 + ')' }"
            >
              <view class="" :id="'content' + index">
                <u-parse :content="item.detail"></u-parse>
              </view>

              <view
                class="watermark"
                v-if="
                  (item.watermark_info && item.watermark_info.type == 1) ||
                  (item.watermark_info && item.watermark_info.type == 3)
                "
              >
                <view
                  v-for="it in 100"
                  class=""
                  :style="{
                    transform: 'rotate(' + item.watermark_info.angle + 'deg)',
                    opacity: (100 - item.watermark_info.opacity * 1) * 0.01,
                    color: item.watermark_info.color,
                    marginTop: item.watermark_info.hh + 'px',
                    marginBottom: item.watermark_info.hh + 'px',
                    marginLeft: item.watermark_info.ww + 'px',
                    marginRight: item.watermark_info.ww + 'px',
                    fontSize: item.watermark_info.text_font + 'px',
                    fontWeight: item.watermark_info.bold == 1 ? 'bold' : '',
                    fontFamily:
                      item.watermark_info.typeface == 1
                        ? 'typeface1'
                        : item.watermark_info.typeface == 2
                        ? 'typeface2'
                        : item.watermark_info.typeface == 3
                        ? 'typeface3'
                        : item.watermark_info.typeface == 4
                        ? 'typeface4'
                        : item.watermark_info.typeface == 5
                        ? 'typeface5'
                        : item.watermark_info.typeface == 6
                        ? 'typeface6'
                        : '',
                  }"
                >
                  <image
                    :src="BASE_URL + item.watermark_info.image"
                    mode=""
                    v-if="
                      item.watermark_info.image && item.watermark_info.type == 1
                    "
                  ></image>
                  <text
                    v-if="
                      item.watermark_info.water_text &&
                      item.watermark_info.type == 3
                    "
                    >{{ item.watermark_info.water_text }}</text
                  >
                </view>
              </view>
              <view
                class="watermark1"
                :style="{
                  left:
                    item.watermark_info.waterPos == 0
                      ? 0 + item.watermark_info.xx + 'px'
                      : item.watermark_info.waterPos == 1
                      ? 0 + item.watermark_info.xx + 'px'
                      : item.watermark_info.waterPos == 4
                      ? 0 + item.watermark_info.voffset + 'px'
                      : item.watermark_info.waterPos == 7
                      ? 0 + item.watermark_info.xx + 'px'
                      : item.watermark_info.waterPos == 2
                      ? 'calc( 40%' + ' + ' + item.watermark_info.xx + 'px )'
                      : item.watermark_info.waterPos == 5
                      ? 'calc( 40%' +
                        ' + ' +
                        item.watermark_info.voffset +
                        'px )'
                      : item.watermark_info.waterPos == 8
                      ? 'calc( 40%' + ' + ' + item.watermark_info.xx + 'px )'
                      : '',
                  top:
                    item.watermark_info.waterPos == 0
                      ? 0 + item.watermark_info.yy + 'px'
                      : item.watermark_info.waterPos == 1
                      ? 0 + item.watermark_info.yy + 'px'
                      : item.watermark_info.waterPos == 2
                      ? 0 + item.watermark_info.yy + 'px'
                      : item.watermark_info.waterPos == 3
                      ? 0 + item.watermark_info.yy + 'px'
                      : item.watermark_info.waterPos == 4
                      ? '40%'
                      : item.watermark_info.waterPos == 5
                      ? '40%'
                      : item.watermark_info.waterPos == 6
                      ? '40%'
                      : '',
                  right:
                    item.watermark_info.waterPos == 3
                      ? 0 + item.watermark_info.xx + 'px'
                      : item.watermark_info.waterPos == 6
                      ? 0 + item.watermark_info.waterPos + 'px'
                      : item.watermark_info.waterPos == 9
                      ? 0 + item.watermark_info.xx + 'px'
                      : '',
                  bottom:
                    item.watermark_info.waterPos == 7
                      ? 0 + item.watermark_info.xx + 'px'
                      : item.watermark_info.waterPos == 8
                      ? 0 + item.watermark_info.ww + 'px'
                      : item.watermark_info.waterPos == 9
                      ? 0 + item.watermark_info.xx + 'px'
                      : '',
                  fontWeight: item.watermark_info.bold == 1 ? 'bold' : '',
                  fontFamily:
                    item.watermark_info.typeface == 1
                      ? 'typeface1'
                      : item.watermark_info.typeface == 2
                      ? 'typeface2'
                      : item.watermark_info.typeface == 3
                      ? 'typeface3'
                      : item.watermark_info.typeface == 4
                      ? 'typeface4'
                      : item.watermark_info.typeface == 5
                      ? 'typeface5'
                      : item.watermark_info.typeface == 6
                      ? 'typeface6'
                      : '',
                }"
                v-if="
                  (item.watermark_info && item.watermark_info.type == 2) ||
                  (item.watermark_info && item.watermark_info.type == 4)
                "
              >
                <view
                  class=""
                  :style="{
                    transform: 'rotate(' + item.watermark_info.angle + 'deg)',
                    color: `rgba(${hexToRgb(item.watermark_info.color).rgb},${
                      (100 - item.watermark_info.opacity * 1) * 0.01
                    })`,
                    fontSize: item.watermark_info.text_font + 'px',
                  }"
                >
                  <image
                    :src="BASE_URL + item.watermark_info.image"
                    mode=""
                    v-if="
                      item.watermark_info.image && item.watermark_info.type == 2
                    "
                  ></image>
                  <text
                    v-if="
                      item.watermark_info.water_text &&
                      item.watermark_info.type == 4
                    "
                    >{{ item.watermark_info.water_text }}</text
                  >
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <u-overlay :show="show" @click="show = false">
      <view class="warp">
        <view class="rect" @tap.stop>
          <image
            :style="{ height: swiperHeight + 'px' }"
            :src="url"
            mode=""
          ></image>
          <p>长按保存到本地</p>
        </view>
      </view>
    </u-overlay>
    <u-overlay
      :show="show2"
      @click="show2 = false"
      @touchstart="start"
      @touchend="end"
      @touchmove="move"
    >
      <view class="warp">
        <view class="rect2">
          <image src="../../static/swiper1.png" mode=""></image>
          <p style="color: #fff">{{ alert2 }}</p>
        </view>
      </view>
    </u-overlay>
    <u-overlay :show="show1" @click="show1 = false">
      <view class="warp">
        <view class="rect1" @tap.stop>
          <image src="../../static/warn.png" mode=""></image>
          <p>{{ alert1 }}</p>
          <u-button
            color="#A5CF49"
            type="success"
            shape="circle"
            text="确认收藏"
            @click="addFavorite"
          ></u-button>
        </view>
      </view>
    </u-overlay>
  </view>
</template>

<script setup>
import limeQrcodeVue from "../../uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.vue";
import html2canvas from "html2canvas";
import { BASE_URL, BASE_URL1 } from "../../utils/http.js";
import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { nextTick, ref } from "vue";
import {
  getsimpleimages,
  getplatformeditor,
  getplatformmeun,
} from "@/utils/api.js";
let isSave = ref(false);
let show = ref(false);
let show1 = ref(false);
let show2 = ref(false);
let startData = ref({
  clientX: "",
  clientY: "",
});
let moveX = ref(0);
let touch = ref({});
// let touch=(e)=>{
// 	console.log(123,e)
// 	current.value++
// 	// show2.value = false
// }
// 触摸touch事件
let start = (e) => {
  //@touchstart 触摸开始
  startData.value.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标
};
let end = (e) => {
  //@touchend触摸结束
  moveX.value = 0; //触摸事件结束恢复原状
  console.log(123, touch.value.clientX - startData.value.clientX);
  if (touch.value.clientX - startData.value.clientX > 0) {
    //在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
    if (current.value != 0) {
      current.value -= 1;
    }
  } else {
    current.value += 1;
    // this.touch = {};
  }
};
let move = (event) => {
  //@touchmove触摸移动
  let touch1 = event.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
  touch.value = touch1;
  let data = touch1.clientX - startData.value.clientX;
  if (touch1.clientX < startData.value.clientX) {
    //向左移动
    if (data < -250) {
      data = -250;
    }
  }
  if (touch1.clientX > startData.value.clientX) {
    //向右移动
    if (moveX.value == 0) {
      data = 0;
    } else {
      if (data > 50) {
        data = 50;
      }
    }
  }
  moveX.value = data;
};
let swiperChange = (e) => {
  current.value = e.detail.current;
  var dom = document.getElementById("swiperItem" + current.value); // 获取dom元素

  if (dom && dom.children[1]) {
    swiperHeight.value = 67 + dom.children[1].clientHeight;
  } else {
    swiperHeight.value = 67;
  }
  if (current.value == list.value.length - 2) {
    page.value += 1;
    getsimpleimages({
      page: page.value,
      page_num: 12,
    }).then((res) => {
      res.data.forEach((item) => {
        item.detail = filterDetail(item.detail);
      });
      list.value = [...list.value, ...res.data];
      // list.value.forEach((item) => {
      //   item.detail=getspan(item.detail)
      // });
    });
  }
};
let page_num = 1;
let page = ref(1);
let url = ref();
let swiperHeight = ref(67);
let current = ref(0);
let list = ref([]);
let refList = ref([]);
let setBoxRef = (el) => {
  if (el) {
    refList.value.push(el);
  }
};
//收藏网站
// 收藏本站
let addFavorite = () => {
  var url = window.location;
  var title = "斑马交易平台";
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf("360se") > -1) {
    alert("您的浏览器不支持自动加入收藏，请手动设置！");
  } else if (ua.indexOf("msie 8") > -1) {
    window.external.AddToFavoritesBar(url, title); //IE8
  } else if (document.all) {
    //IE类浏览器
    try {
      window.external.addFavorite(url, title);
    } catch (e) {
      alert("您的浏览器不支持自动加入收藏，请手动设置！");
    }
  } else if (window.sidebar) {
    //firfox等浏览器；
    window.sidebar.addPanel(title, url, "");
  } else {
    alert("您的浏览器不支持自动加入收藏，请手动设置！");
  }
  show1.value = false;
};

function filterDetail(str) {
  let detail = str.split('<font style="">');
  detail = detail.map((item, index) => {
    return !index ? item : item.replace("</font>", "");
  });
  return detail.join("");
}

let takephotos = () => {
  var swiper = document.getElementById("copyswiperItem" + current.value); // 获取dom元素
  var dom = document.getElementById("content" + current.value); // 获取dom元素
  var dom1 = document.getElementById("copycontent" + current.value); // 获取dom元素
  dom1.innerHTML = dom.innerHTML;
  let res = domTrans(dom1);
  let html = forFn(res);
  dom1.innerHTML = html;
  html2canvas(swiper, {
    allowTaint: true,
    useCORS: true,
    ignoreElements: (e) => {
      if (e.contains(swiper) || swiper.contains(e)) {
        return false;
      }
      return true;
    },
  }).then((canvas) => {
    url.value = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    show.value = true;
  });
};
let alert1 = ref("");
let alert2 = ref("");
let jt_bg1 = ref("");
let jt_bg2 = ref("");
onLoad(() => {
  getplatformmeun().then((res) => {
    uni.setNavigationBarTitle({
      title: res.data.name,
    });
    jt_bg1.value = res.data.jt_bg1;
    jt_bg2.value = res.data.jt_bg2;
  });
  getplatformeditor().then((res) => {
    alert1.value = res.data.alert1;
    alert2.value = res.data.alert2;
  });
  getsimpleimages({
    page: page.value,
    page_num: 12,
  }).then((res) => {
    show2.value = true;
    res.data.forEach((item) => {
      item.detail = filterDetail(item.detail);
    });
    list.value = res.data;
    // list.value.forEach(item=>{
    //   item.detail=getspan(item.detail)
    // })
    setTimeout(() => {
      var dom = document.getElementById("swiperItem" + current.value); // 获取dom元素
      if (dom && dom.children[1]) {
        swiperHeight.value = 67 + dom.children[1].clientHeight;
      } else {
        swiperHeight.value = 67;
      }
    });
    setTimeout(() => {
      show2.value = false;
    }, 5000);
  });
  let flag = uni.getStorageSync("collect");
  if (!flag) {
    show1.value = true;
    uni.setStorageSync("collect", true);
  }
});

onShow(() => {});

function hexToRgb(val) {
  //HEX十六进制颜色值转换为RGB(A)颜色值
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  var color = val.toLowerCase();
  var result = "";
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值，转为RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    result = colorChange.join(",");
    return {
      rgb: result,
      r: colorChange[0],
      g: colorChange[1],
      b: colorChange[2],
    };
  } else {
    result = "无效";
    return {
      rgb: result,
    };
  }
}

function getspan(str) {
  // let st=str.replace(new RegExp('font', 'g'), 'span')
  var list1 = str.split("</span>");
  var list2 = [];
  list1.forEach((val) => {
    if (val.indexOf("<span") > -1) {
      list2.push({
        isspan: true,
        arr: val.split("<span"),
      });
    } else {
      list2.push({
        isspan: false,
        arr: val,
      });
    }
  });
  var list3 = [];
  list2.forEach((val) => {
    if (val.isspan) {
      list3.push({
        ...val,
        style: val.arr[1].split(">")[0],
        span: val.arr[1].split(">")[1],
      });
    } else {
      list3.push({
        ...val,
      });
    }
  });
  var html = "";
  list3.forEach((val) => {
    if (val.isspan) {
      html = html + val.arr[0];
      var span = "";
      for (var a = 0; a < val.span.length; a++) {
        span = span + `<span${val.style}>${val.span[a]}</span>`;
      }
      html = html + span;
    } else {
      html = html + val.arr;
    }
  });
  return html;
}

onPullDownRefresh(() => {
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 1000);
});
// 将DOM转换为js对象
function domTrans(dom) {
  // 总dom树
  let tree = [];

  // 递归, node = 当前的节点，dataNode = 数据插入的节点
  const loop = (node, dataNode) => {
    // 当前节点的模板
    let temp = {
      type: node.nodeType,
    };
    // 如果是文本节点 或 单标签节点
    if (temp.type == 3 && node.nodeValue.match(/\S/)) {
      temp["content"] = node.nodeValue;
      temp["tag"] = node.nodeName;
      dataNode.push(temp);
    }

    // 元素节点
    if (temp.type == 1) {
      let attributes = getAttribute(node);

      // 如果没有属性，不添加 attributes
      if (attributes) temp["attributes"] = attributes;

      var newNode = node.childNodes;

      var newNode2;
      if (newNode[0] && newNode.length <= 1) {
        newNode2 = newNode[0].childNodes.length;
      }
      // 当前节点下还有子节点
      if (node.childNodes.length > 1 || newNode2 > 0) {
        temp["children"] = [];
        temp["tag"] = node.nodeName.toLowerCase();
        for (let i = 0; i < node.childNodes.length; i++) {
          loop(node.childNodes[i], temp.children);
        }
      }
      // 当前节点下只有文本 或 单标签节点
      if (node.childNodes.length <= 1 && newNode2 == 0) {
        temp["content"] = node.innerHTML;
        temp["tag"] = node.nodeName.toLowerCase();
      }

      dataNode.push(temp);
    }
  };
  loop(dom, tree);
  return tree[0].children;
}

function forFn(arr) {
  let html = ``;
  for (let i = 0; i < arr.length; i++) {
    let tArr = [];
    if (arr[i].content) {
      if (arr[i].content.includes("&nbsp;")) {
        let cArr = arr[i].content.split("&nbsp;").map((item) => item.split(""));
        let a = cArr.length - 1;
        for (let i = 0; i < a; i++) {
          cArr.splice(i + 2, 0, "&nbsp;");
        }
        tArr = cArr.flat();
      } else {
        tArr = arr[i].content.split("");
      }
    }
    if (arr[i].type === 1) {
      if (arr[i].attributes) {
        if (arr[i].attributes.src) {
          html += `<img class="${arr[i].attributes.class}" src="${arr[i].attributes.src}" style="${arr[i].attributes.style}">`;
        } else {
          html += `<${arr[i].tag} class="${arr[i].attributes.class}" style="${arr[i].attributes.style}">`;
        }
      } else {
        if (arr[i].tag == "img") {
          html += `<${arr[i].tag} style="${arr[i].attributes.style}">`;
        } else {
          html += `<${arr[i].tag}>`;
        }
      }
      if (arr[i].children) {
        html += forFn(arr[i].children);
      }
      html += `</${arr[i].tag}>`;
    }
    tArr.forEach((el) => {
      if (arr[i].tag === "#text") {
        html += `${el}`;
      } else {
        if (arr[i].attributes) {
          if (arr[i].tag == "img") {
            html += `<${arr[i].tag} class="${arr[i].attributes.class}" src="${arr[i].attributes.src}" style="${arr[i].attributes.style}">${el}</${arr[i].tag}>`;
          } else {
            html += `<${arr[i].tag} class="${arr[i].attributes.class}" style="${arr[i].attributes.style}">${el}</${arr[i].tag}>`;
          }
        } else {
          if (arr[i].tag == "img") {
            html += `<${arr[i].tag} src="${arr[i].attributes.src}">${el}</${arr[i].tag}>`;
          } else {
            html += `<${arr[i].tag}>${el}</${arr[i].tag}>`;
          }
        }
      }
    });
  }
  // console.log(html,'====')
  return html;
}
// 提取元素属性
function getAttribute(dom) {
  let attributes = {};
  //   let empty = true;
  Array.from(dom.attributes).map((item) => {
    attributes[item.nodeName] = item.nodeValue;
    // empty = false;
  });
  return attributes;
}
</script>

<style lang="scss">
.typeface1 {
  font-family: typeface1;
}

.swiper-itemcopy {
  position: absolute;
  top: 999px;
}

.content {
  padding-left: 10rpx;
  padding-right: 10rpx;
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  position: relative;

  .watermark {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    // bottom: 0;
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .watermark1 {
    position: absolute;

    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
}

.warp {
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 694px;
  height: auto;

  image {
    width: 100%;
  }

  p {
    font-size: 48rpx;
    color: #fff;
    margin-top: 12rpx;
  }

  // background-color: #fff;
}

@keyframes example1 {
  0% {
    transform: translate(0);
  }

  50% {
    transform: translate(-40px);
  }

  100% {
    transform: translate(-80px);
  }

  0% {
    transform: translate(0);
  }
}

.rect2 {
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 374rpx;
    height: 361rpx;
  }

  transform: translate(0);
  animation: example1 1s linear 0s backwards;
  animation-iteration-count: infinite;
}

.rect1 {
  padding: 60rpx 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 558rpx;
  // height: 438rpx;
  background: #ffffff;
  border-radius: 20rpx;

  image {
    max-width: 96rpx;
    max-height: 96rpx;
  }

  p {
    font-size: 30rpx;
    margin: 62rpx 0 40rpx;
  }

  // background-color: #fff;
}

page {
  height: 100%;

  .btn {
    font-size: 35rpx;
    color: #fff;
    text-align: center;
    line-height: 90rpx;
    float: right;
    width: 200rpx;
    height: 90rpx;
    background: #a5cf49;
    border-radius: 0rpx 0rpx 0rpx 32rpx;
  }

  .swiperBox {
    width: 694rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .swiper-item {
      .titleBox {
        position: relative;
        font-size: 28rpx;
        color: #666666;
        padding: 6rpx;

        display: flex;
        align-items: flex-end;

        image {
          margin-right: 4rpx;
          width: 112rpx;
          height: 112rpx;
        }

        .jtbj {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 0;
        }

        .warn {
          font-size: 32rpx;
          color: #ff2828;
        }

        .title {
          margin-left: 4rpx;
        }
      }
    }
  }
}
</style>