123

postcss.config.js

@@ -36,7 +36,7 @@ export default {
         autoprefixer(), // 自动添加浏览器前缀
         postcssResponsiveType(), // 自动调整文本大小
         customPxToViewportPlugin({
-            unitPrecision: 5, // 保留的小数位数
+            unitPrecision: 10, // 保留的小数位数
             selectorBlackList: [/^\.van/], // 以 .van 开头的类名不转换
             minPixelValue: 1, // 小于或等于 1px 不转换
             mediaQuery: false, // 允许在媒体查询中转换 px

src/router/index.js

@@ -15,6 +15,11 @@ const routes = [
         name: 'signup',
         component: () => import('@/views/signup/index.vue')
     },
+    {
+        path: '/confirm',
+        name: 'confirm',
+        component: () => import('@/views/confirm/index.vue')
+    },
 
 ];
 

src/views/complete/index.vue

@@ -0,0 +1,24 @@
+<script setup>
+import {useAdaptation} from "@/utils/self-adaption.js";
+import {sizes} from "@/dict/index.js";
+import size375 from '@/views/confirm/size375/index.vue'
+import {computed} from "vue";
+const {maxWidth}= useAdaptation(sizes,(maxWidth)=>{
+})
+const viewComponent = computed(()=>{
+  switch (maxWidth.value){
+    case '375px':
+      return size375
+    default:
+      return size375
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent"></component>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/complete/size375/index.vue

@@ -0,0 +1,338 @@
+<script setup>
+import { useAdaptation } from "@/utils/self-adaption.js";
+import {ref} from "vue";
+const { maxWidth } = useAdaptation([
+  { maxWidth: '375px' },
+  { maxWidth: '768px' }
+])
+const showPicker=ref(false)
+const columns=ref([
+  {text:'男',value:0},
+  {text:'女',value:1}
+])
+function onConfirm(){
+}
+</script>
+
+<template>
+  <div class="box-border relative w-[1920px] h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/zu3237.png')] flex items-center flex-col container">
+    <div class="content1"></div>
+    <div class="content2">
+      <div class="wrap1" style="margin-top: 0">
+        <div class="wrap1_1">*姓名</div>
+        <div class="wrap1_2">
+         王小午
+        </div>
+      </div>
+      <div class="wrap1">
+        <div class="wrap1_1">*年龄</div>
+        <div class="wrap1_2">
+      10 岁
+        </div>
+      </div>
+      <div class="wrap1">
+        <div class="wrap1_1">*性别</div>
+        <div class="wrap1_2">
+          女
+        </div>
+      </div>
+      <div class="package1">
+        <div class="package1_1">
+          <div class="package1_1_1">*作品1</div>
+          <div class="package1_1_2">
+            <img class="package1_1_2_1" src="@/assets/image/zwbackground@2x.png" alt="">
+            <div class="package1_1_2_2">
+              <div class="package1_1_2_2_1">作品名称</div>
+              <div class="package1_1_2_2_2">盛夏光年</div>
+            </div>
+            <div class="package1_1_2_3">
+              <div class="package1_1_2_3_1">
+                <div class="package1_1_2_3_1_1">长度</div>
+                <div class="package1_1_2_3_1_2">34 cm</div>
+              </div>
+              <div class="package1_1_2_3_2">
+                <div class="package1_1_2_3_2_1">宽度</div>
+                <div class="package1_1_2_3_2_2">56 cm</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="package2">
+        <div class="package2_1">取消</div>
+        <div class="package2_2">提交报名</div>
+      </div>
+    </div>
+    <div class="content3">
+      <img src="@/assets/image/gdz27.png" alt="">
+    </div>
+    <div class="content4">
+      <img src="@/assets/image/zu733@2x.png" alt="">
+    </div>
+    <van-popup v-model:show="showPicker" round position="bottom">
+      <van-picker
+          :columns="columns"
+          @cancel="showPicker = false"
+          @confirm="onConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container {
+
+  .content4 {
+    position: absolute;
+    bottom: 200px;
+
+    img {
+      width: 1270px;
+      height: 145px;
+
+    }
+  }
+  .content3 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-size: cover;
+
+    img {
+      width: 671px;
+      height: 728px;
+    }
+  }
+  .content1 {
+    margin-top: 143px;
+    background-size: cover;
+    width: 1074px;
+    height: 178px;
+    background-repeat: no-repeat;
+    background-image: url("@/assets/image/zu3314@2x.png");
+  }
+  .content2 {
+    padding-left: 82px;
+    padding-right: 82px;
+    margin-top: 123px;
+    background-size: cover;
+    width: 1654px;
+    height: 2729px;
+    background-repeat: no-repeat;
+    background-image: url("@/assets/image/zu3186@2x.png");
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 200px;
+    .package2{
+      width: 100%;
+      display: flex;
+      margin-top: 60px;
+      justify-content: space-between;
+      .package2_1{
+          background-color:#fff;
+        width: 512px;
+        height: 200px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 100px;
+        box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1); /* X轴偏移, Y轴偏移, 模糊半径, 阴影颜色 */
+
+      }
+      .package2_2{
+        background-size: contain;
+        background-repeat: no-repeat;
+        width: 866px;
+        height: 200px;
+        background-image: url("@/assets/image/zu3189@2x1.png");
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        font-size: 82px;
+      }
+
+
+    }
+    .package1{
+      padding-top: 46px;
+      padding-left: 31px;
+      width: 1490px;
+      height: 1690px;
+      background-color: #F5F5F5;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .package1_2 {
+        margin-bottom: 46px;
+        margin-top: 51px;
+        width: 184px; /* 按照图片的实际尺寸调整 */
+        height: 184px; /* 按照图片的实际尺寸调整 */
+        background-color: #336699; /* 蓝色背景颜色 */
+        border-radius: 50%; /* 圆形 */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选的阴影效果 */
+      }
+      .package1_2::before,
+      .package1_2::after {
+        content: '';
+        position: absolute;
+        background-color: white; /* 加号的颜色 */
+      }
+
+      .package1_2::before {
+        width: 88px; /* 加号横线的宽度 */
+        height: 6px; /* 加号横线的高度 */
+      }
+
+      .package1_2::after {
+        width: 6px; /* 加号竖线的宽度 */
+        height: 88px; /* 加号竖线的高度 */
+      }
+      .package1_1{
+        margin-bottom: 92px;
+        width: 100%;
+        display: flex;
+        .package1_1_2{
+          .x_c2{
+            margin-top: 20px;
+            width: 1174px;
+            padding-left: 61px;
+            height: 174px;
+            background-color: #DCE5E9;
+            border: none;
+            &:focus{
+              outline: none;
+            }
+            &::placeholder {
+              font-size: 72px;
+              color: #2B69A1;
+            }
+          }
+          .x_c3{
+            margin-top: 41px;
+            display: flex;
+            justify-content: space-between;
+            .x_c3_1{
+              display: flex;
+flex-direction: column;
+              .x_c3_1_2{
+                display: flex;
+                align-items: center;
+                .x_c3_1_2_2{
+                  color: #2B69A1;
+                  font-size: 72px;
+                }
+                .x_c3_1_2_1{
+                  margin-right: 51px;
+                  padding-left: 61px;
+                  width: 379px;
+                  height: 174px;
+                  background-color: #DCE5E9;
+                  border: none;
+                  &:focus{
+                    outline: none;
+                  }
+                  &::placeholder {
+                    font-size: 72px;
+                    color: #2B69A1;
+                  }
+                }
+              }
+              .x_c3_1_1{
+
+                color: #2B69A1;
+                font-size: 61px;
+              }
+            }
+          }
+          .x_c1{
+            margin-top: 41px;
+            color: #2B69A1;
+            font-size: 61px;
+          }
+          .package1_1_2_3{
+            display: flex;
+            .package1_1_2_3_2{
+              display: flex;
+              .package1_1_2_3_2_1{
+                margin-right: 51px;
+                font-weight:bold;
+                color: #2B69A1;
+                font-size: 61px;
+              }
+              .package1_1_2_3_2_2{
+                color: #2B69A1;
+                font-size: 61px;
+              }
+            }
+            .package1_1_2_3_1{
+              display: flex;
+              .package1_1_2_3_1_1{
+                margin-right: 51px;
+                font-weight:bold;
+                color: #2B69A1;
+                font-size: 61px;
+              }
+              .package1_1_2_3_1_2{
+                margin-right: 251px;
+                color: #2B69A1;
+                font-size: 61px;
+              }
+            }
+          }
+          .package1_1_2_2{
+            margin-top:56px;
+            display: flex;
+            .package1_1_2_2_2{
+              color: #2B69A1;
+              font-size:61px;
+            }
+            .package1_1_2_2_1{
+              margin-right:51px;
+              font-weight:bold;
+              color: #2B69A1;
+              font-size:61px;
+            }
+          }
+          .package1_1_2_1{
+         width: 1147px;
+            height: 691px;
+          }
+        }
+
+        .package1_1_1{
+          width: 256px;
+          color: #2B69A1;
+          font-weight: bold;
+
+        }
+      }
+    }
+
+    .wrap1 {
+      padding-left: 31px;
+      margin-top: 80px;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      .wrap1_2 {
+color: #2B69A1;
+        font-size: 72px;
+      }
+
+      .wrap1_1 {
+      width: 256px;
+        font-weight: bold;
+        color: #2B69A1;
+        font-size: 72px;
+      }
+    }
+  }
+}
+
+</style>

src/views/confirm/index.vue

@@ -0,0 +1,24 @@
+<script setup>
+import {useAdaptation} from "@/utils/self-adaption.js";
+import {sizes} from "@/dict/index.js";
+import size375 from '@/views/confirm/size375/index.vue'
+import {computed} from "vue";
+const {maxWidth}= useAdaptation(sizes,(maxWidth)=>{
+})
+const viewComponent = computed(()=>{
+  switch (maxWidth.value){
+    case '375px':
+      return size375
+    default:
+      return size375
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent"></component>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/confirm/size375/index.vue

@@ -0,0 +1,338 @@
+<script setup>
+import { useAdaptation } from "@/utils/self-adaption.js";
+import {ref} from "vue";
+const { maxWidth } = useAdaptation([
+  { maxWidth: '375px' },
+  { maxWidth: '768px' }
+])
+const showPicker=ref(false)
+const columns=ref([
+  {text:'男',value:0},
+  {text:'女',value:1}
+])
+function onConfirm(){
+}
+</script>
+
+<template>
+  <div class="box-border relative w-[1920px] h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/zu3237.png')] flex items-center flex-col container">
+    <div class="content1"></div>
+    <div class="content2">
+      <div class="wrap1" style="margin-top: 0">
+        <div class="wrap1_1">*姓名</div>
+        <div class="wrap1_2">
+         王小午
+        </div>
+      </div>
+      <div class="wrap1">
+        <div class="wrap1_1">*年龄</div>
+        <div class="wrap1_2">
+      10 岁
+        </div>
+      </div>
+      <div class="wrap1">
+        <div class="wrap1_1">*性别</div>
+        <div class="wrap1_2">
+          女
+        </div>
+      </div>
+      <div class="package1">
+        <div class="package1_1">
+          <div class="package1_1_1">*作品1</div>
+          <div class="package1_1_2">
+            <img class="package1_1_2_1" src="@/assets/image/zwbackground@2x.png" alt="">
+            <div class="package1_1_2_2">
+              <div class="package1_1_2_2_1">作品名称</div>
+              <div class="package1_1_2_2_2">盛夏光年</div>
+            </div>
+            <div class="package1_1_2_3">
+              <div class="package1_1_2_3_1">
+                <div class="package1_1_2_3_1_1">长度</div>
+                <div class="package1_1_2_3_1_2">34 cm</div>
+              </div>
+              <div class="package1_1_2_3_2">
+                <div class="package1_1_2_3_2_1">宽度</div>
+                <div class="package1_1_2_3_2_2">56 cm</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="package2">
+        <div class="package2_1">取消</div>
+        <div class="package2_2">提交报名</div>
+      </div>
+    </div>
+    <div class="content3">
+      <img src="@/assets/image/gdz27.png" alt="">
+    </div>
+    <div class="content4">
+      <img src="@/assets/image/zu733@2x.png" alt="">
+    </div>
+    <van-popup v-model:show="showPicker" round position="bottom">
+      <van-picker
+          :columns="columns"
+          @cancel="showPicker = false"
+          @confirm="onConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container {
+
+  .content4 {
+    position: absolute;
+    bottom: 200px;
+
+    img {
+      width: 1270px;
+      height: 145px;
+
+    }
+  }
+  .content3 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-size: cover;
+
+    img {
+      width: 671px;
+      height: 728px;
+    }
+  }
+  .content1 {
+    margin-top: 143px;
+    background-size: cover;
+    width: 1074px;
+    height: 178px;
+    background-repeat: no-repeat;
+    background-image: url("@/assets/image/zu3314@2x.png");
+  }
+  .content2 {
+    padding-left: 82px;
+    padding-right: 82px;
+    margin-top: 123px;
+    background-size: cover;
+    width: 1654px;
+    height: 2729px;
+    background-repeat: no-repeat;
+    background-image: url("@/assets/image/zu3186@2x.png");
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 200px;
+    .package2{
+      width: 100%;
+      display: flex;
+      margin-top: 60px;
+      justify-content: space-between;
+      .package2_1{
+          background-color:#fff;
+        width: 512px;
+        height: 200px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 100px;
+        box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1); /* X轴偏移, Y轴偏移, 模糊半径, 阴影颜色 */
+
+      }
+      .package2_2{
+        background-size: contain;
+        background-repeat: no-repeat;
+        width: 866px;
+        height: 200px;
+        background-image: url("@/assets/image/zu3189@2x1.png");
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        font-size: 82px;
+      }
+
+
+    }
+    .package1{
+      padding-top: 46px;
+      padding-left: 31px;
+      width: 1490px;
+      height: 1690px;
+      background-color: #F5F5F5;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .package1_2 {
+        margin-bottom: 46px;
+        margin-top: 51px;
+        width: 184px; /* 按照图片的实际尺寸调整 */
+        height: 184px; /* 按照图片的实际尺寸调整 */
+        background-color: #336699; /* 蓝色背景颜色 */
+        border-radius: 50%; /* 圆形 */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选的阴影效果 */
+      }
+      .package1_2::before,
+      .package1_2::after {
+        content: '';
+        position: absolute;
+        background-color: white; /* 加号的颜色 */
+      }
+
+      .package1_2::before {
+        width: 88px; /* 加号横线的宽度 */
+        height: 6px; /* 加号横线的高度 */
+      }
+
+      .package1_2::after {
+        width: 6px; /* 加号竖线的宽度 */
+        height: 88px; /* 加号竖线的高度 */
+      }
+      .package1_1{
+        margin-bottom: 92px;
+        width: 100%;
+        display: flex;
+        .package1_1_2{
+          .x_c2{
+            margin-top: 20px;
+            width: 1174px;
+            padding-left: 61px;
+            height: 174px;
+            background-color: #DCE5E9;
+            border: none;
+            &:focus{
+              outline: none;
+            }
+            &::placeholder {
+              font-size: 72px;
+              color: #2B69A1;
+            }
+          }
+          .x_c3{
+            margin-top: 41px;
+            display: flex;
+            justify-content: space-between;
+            .x_c3_1{
+              display: flex;
+flex-direction: column;
+              .x_c3_1_2{
+                display: flex;
+                align-items: center;
+                .x_c3_1_2_2{
+                  color: #2B69A1;
+                  font-size: 72px;
+                }
+                .x_c3_1_2_1{
+                  margin-right: 51px;
+                  padding-left: 61px;
+                  width: 379px;
+                  height: 174px;
+                  background-color: #DCE5E9;
+                  border: none;
+                  &:focus{
+                    outline: none;
+                  }
+                  &::placeholder {
+                    font-size: 72px;
+                    color: #2B69A1;
+                  }
+                }
+              }
+              .x_c3_1_1{
+
+                color: #2B69A1;
+                font-size: 61px;
+              }
+            }
+          }
+          .x_c1{
+            margin-top: 41px;
+            color: #2B69A1;
+            font-size: 61px;
+          }
+          .package1_1_2_3{
+            display: flex;
+            .package1_1_2_3_2{
+              display: flex;
+              .package1_1_2_3_2_1{
+                margin-right: 51px;
+                font-weight:bold;
+                color: #2B69A1;
+                font-size: 61px;
+              }
+              .package1_1_2_3_2_2{
+                color: #2B69A1;
+                font-size: 61px;
+              }
+            }
+            .package1_1_2_3_1{
+              display: flex;
+              .package1_1_2_3_1_1{
+                margin-right: 51px;
+                font-weight:bold;
+                color: #2B69A1;
+                font-size: 61px;
+              }
+              .package1_1_2_3_1_2{
+                margin-right: 251px;
+                color: #2B69A1;
+                font-size: 61px;
+              }
+            }
+          }
+          .package1_1_2_2{
+            margin-top:56px;
+            display: flex;
+            .package1_1_2_2_2{
+              color: #2B69A1;
+              font-size:61px;
+            }
+            .package1_1_2_2_1{
+              margin-right:51px;
+              font-weight:bold;
+              color: #2B69A1;
+              font-size:61px;
+            }
+          }
+          .package1_1_2_1{
+         width: 1147px;
+            height: 691px;
+          }
+        }
+
+        .package1_1_1{
+          width: 256px;
+          color: #2B69A1;
+          font-weight: bold;
+
+        }
+      }
+    }
+
+    .wrap1 {
+      padding-left: 31px;
+      margin-top: 80px;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      .wrap1_2 {
+color: #2B69A1;
+        font-size: 72px;
+      }
+
+      .wrap1_1 {
+      width: 256px;
+        font-weight: bold;
+        color: #2B69A1;
+        font-size: 72px;
+      }
+    }
+  }
+}
+
+</style>