feate

src/components/CoverBtn.vue

 <style lang="less" scoped>
 .cover-btn {
   position: absolute;
-  background: rgba(255, 0, 0, 0.5);
+  // background: rgba(255, 0, 0, 0.5);
   z-index: 100;
 }
 </style>

src/components/Image.vue

 
   const onLoad = (e) => {
     emit('load', e);
-    const { width, height, naturalHeight, naturalWidth } = e.target;
+    const { clientWidth: width, clientHeight: height, naturalHeight, naturalWidth } = e.target;
+    console.log(e.target);
+    console.log('----height-----height----->', window.devicePixelRatio, height, document.body.clientHeight); 
     const xRate = width / naturalWidth;
     const yRate = height / naturalHeight;
 

src/components/VerticalText.vue

+<template>
+  <div class="vertical-text">
+      <div class="vertical-row" v-for="(row, inx) in list" :key="`row-${inx}`" :style="getRowStyle(row)">
+        <div class="vertical-col" v-for="(text, i) in row" :key="`col-${i}`" :style="colStyle">
+          <span>{{ text }}</span>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "@vue/runtime-core";
+
+const props = defineProps({
+  text: String,
+  size: {
+    type: Array,
+    default: [26, 18],
+  }
+});
+
+const colStyle = computed(() => {
+  return { width: `${props.size[0]}px`, height: `${props.size[0]}px`, fontSize: `${props.size[1]}px` }
+})
+
+const list = computed(() => {
+  const rows = (props.text || '').replace(/[\r\n]/g, '<br>').replace(/[\n]/g, '<br>').split('<br>');
+  return rows.map(it => it.split(''));
+});
+
+const getRowStyle = (row = []) => {
+  const width = Math.ceil(row.length / 8) * props.size[0];
+  return { width: `${width}px` }
+}
+
+</script>
+
+<style lang="less" scoped>
+.vertical-text {
+  width: 100%;
+  height: 100%;
+  text-align: right;
+  overflow-y: hidden;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: row-reverse;
+
+  // & > div {
+  //   display: inline-block;
+  //   height: 100%;
+  // }
+
+  .vertical-row {
+    flex: none;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    flex-wrap: wrap-reverse;
+  }
+
+  .vertical-col {
+    flex: none;
+  }
+}
+</style>
+

src/pages/creation/index.vue

   const [author, poemContent] = useModel('poem');
 
   const onLoad = (e) => {
-    const { width, height, naturalHeight, naturalWidth } = e.target;
+    const { clientWidth: width, clientHeight: height, naturalHeight, naturalWidth } = e.target;
     const xRate = width / naturalWidth;
     const yRate = height / naturalHeight;
 

src/pages/index/index.vue

   const gdStyle = ref({});
   const pgStyle = ref({});
 
+  console.log('---------render------------>')
+
   const onLoad = (e) => {
+    console.log('---------onload------------>')
     const { width, height } = e.target;
     gdStyle.value = {
       width: `${width}px`,

src/pages/makeSaving/index.vue

       <Image :src="backImg" :actions="actions" @load="onLoad"/>
       <img :src="qrcode" alt="" class="qrcode" :style="qrStyle">
       <div class="poem-author" :style="iiStyle">{{ author }}</div>
-      <div class="poem-content" :style="ttStyle" v-html="contentHtml"></div>
+      <div class="poem-content" :style="ttStyle">
+        <VerticalText :text="content" :size="sizeRef" />
+      </div>
     </div>
     <TGradient :style="gdStyle" color="#0f2c37" />
     <template v-if="creation">
   import html2canvas from 'html2canvas';
   import Image from '@/components/Image.vue';
   import TGradient from '@/components/TGradient.vue';
+  import VerticalText from '../../components/VerticalText.vue';
   import { getPageStyle } from '@/utils/page';
   
   const backImg = './images/3.png';
   const psStyle = ref({});
   const qrStyle = ref({ width: '1px', height: '1px' });
   const pgStyle = ref({});
+  const sizeRef = ref([26, 18]);
   const creation = ref();
   const [author, content] = useModel('poem');
   const [qrcode] = useModel('qrcode');
 
-  const contentHtml = computed(() => (content.value || '').replace(/[\r\n]/g, '<br>').replace(/[\n]/g, '<br>'));
-
   const onNextClick = () => {
     router.push('/creation');
   };
 
   const onLoad = (e) => {
-    console.log('---------')
-    const { width, height, naturalHeight, naturalWidth } = e.target;
+    const { clientWidth: width, clientHeight: height, naturalHeight, naturalWidth } = e.target;
     const xRate = width / naturalWidth;
     const yRate = height / naturalHeight;
 
       lineHeight: `${50 * xRate}px`,
     };
 
+    sizeRef.value = [50 * xRate, 36 * xRate];
+
     iiStyle.value = {
       top: `${authorHeight * yRate}px`,
     };
         // background: rgba(255, 0,0, .5);
         position: absolute;
 
-        writing-mode: vertical-rl;
+        // writing-mode: vertical-rl;
         font-size: 18px;
         color: #0F3341;
         line-break: anywhere;

src/utils/page.js

 const height = document.body.clientHeight;
 
 export function getPageStyle(fitHeight) {
+  console.log('---------height------->', height);
   // return fitHeight > height ? { height: `${fitHeight}px`, overflow: 'hidden' } : { height: `${height}px`, overflow: 'hidden' }
   return {};
 }