diff --git a/package.json b/package.json
index 239ba1db..7b43ce7d 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"devDependencies": {
"@vitejs/plugin-vue": "^1.3.0",
"@vue/compiler-sfc": "^3.0.5",
+ "postcss-px-to-viewport": "^1.1.1",
"prettier": "^2.8.7",
"sass": "^1.37.5",
"unplugin-auto-import": "^0.11.2",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..d31e09e2
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,56 @@
+module.exports = {
+ plugins: {
+ // ...
+ 'postcss-px-to-viewport': {
+ // (String) 需要转换的单位，默认为"px"
+ unitToConvert: 'px',
+ // (Number) 设计稿的视口宽度
+ viewportWidth: 1920,
+ // (Number) 单位转换后保留的精度
+ unitPrecision: 5,
+ /**
+ * (Array) 能转化为vw的属性列表
+ * 传入特定的CSS属性；
+ * 可以传入通配符""去匹配所有属性，例如：['']；
+ * 在属性的前或后添加"*",可以匹配特定的属性. (例如['position'] 会匹配 background-position-y)
+ * 在特定属性前加 "!"，将不转换该属性的单位 . 例如: ['*', '!letter-spacing']，将不转换letter-spacing
+ * "!" 和 ""可以组合使用， 例如: ['', '!font*']，将不转换font-size以及font-weight等属性
+ */
+ propList: ['*'],
+ // (String) 希望使用的视口单位
+ viewportUnit: 'vw',
+ // (String) 字体使用的视口单位
+ fontViewportUnit: 'vw',
+ /**
+ * (Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+ * 如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配：例如 selectorBlackList 为 ['body'] 的话， 那么 .body-class 就会被忽略
+ * 如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则：例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会
+ */
+ selectorBlackList: [],
+ // (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+ minPixelValue: 1,
+ // (Boolean) 媒体查询里的单位是否需要转换单位
+ mediaQuery: false,
+ // (Boolean) 是否直接更换属性值，而不添加备用属性
+ replace: true,
+ /**
+ * (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+ * 如果值是一个正则表达式，那么匹配这个正则的文件会被忽略
+ * 如果传入的值是一个数组，那么数组里的值必须为正则
+ */
+ exclude: /flowStyle/,
+ /**
+ * (Array or Regexp) 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
+ * 如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件
+ * 如果传入的值是一个数组，那么数组里的值必须为正则
+ */
+ include: undefined,
+ // (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+ landscape: false,
+ // (String) 横屏时使用的单位
+ landscapeUnit: 'vw',
+ // (Number) 横屏时使用的视口宽度
+ landscapeWidth: 568
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/styles/flowStyle.scss b/src/styles/flowStyle.scss
new file mode 100644
index 00000000..f6e3c6a0
--- /dev/null
+++ b/src/styles/flowStyle.scss
@@ -0,0 +1,339 @@
+.bx {
+ position: relative;
+ .ztjk {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ font-size: 14px;
+ font-size: #747474;
+ top: 235px;
+ left: 680px;
+ > img {
+ width: 62px;
+ height: 62px;
+ }
+ }
+ .left {
+ width: 640px !important;
+ height: 500px;
+ background: #ffffff;
+ box-shadow: 0px 0px 16px 0px rgba(211, 131, 42, 0.1);
+ border-radius: 32px;
+ opacity: 1;
+ box-sizing: border-box;
+ position: absolute;
+ left: 20px;
+ top: 10px;
+ padding: 30px 44px;
+ .tptitl {
+ display: flex;
+ align-items: center;
+ > img {
+ width: 32px;
+ height: 22px;
+ margin-right: 8px;
+ }
+ }
+ .onebx1 {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ margin-top: 30px;
+ > div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ font-size: 14px;
+ font-size: #747474;
+ > img {
+ width: 62px;
+ height: 62px;
+ }
+ }
+ .item1 {
+ top: 10px;
+ left: 0px;
+ }
+ .item2 {
+ top: 140px;
+ left: 0px;
+ }
+ .item3 {
+ top: 10px;
+ left: 140px;
+ }
+ .item4 {
+ top: 140px;
+ left: 140px;
+ }
+ .item5 {
+ top: 270px;
+ left: 140px;
+ }
+ .item6 {
+ top: 10px;
+ left: 330px;
+ }
+ .item7 {
+ top: 140px;
+ left: 330px;
+ }
+ .item8 {
+ top: 140px;
+ left: 450px;
+ }
+ .upimg {
+ width: 15px;
+ height: 40px;
+ position: absolute;
+ left: 355px;
+ top: 100px;
+ }
+ .rigth1 {
+ width: 40px;
+ height: 15px;
+ position: absolute;
+ left: 80px;
+ top: 40px;
+ }
+ .rigth2 {
+ width: 40px;
+ height: 15px;
+ position: absolute;
+ left: 80px;
+ top: 180px;
+ }
+ .rigth3 {
+ width: 40px;
+ height: 15px;
+ position: absolute;
+ left: 400px;
+ top: 180px;
+ }
+ .rigth4 {
+ width: 40px;
+ height: 15px;
+ position: absolute;
+ left: 530px;
+ top: 180px;
+ }
+ .rigthall {
+ width: 40px;
+ height: 270px;
+ position: absolute;
+ left: 250px;
+ top: 50px;
+ }
+ }
+ }
+ .rigth {
+ width: 640px;
+ height: 500px;
+ background: #ffffff;
+ box-shadow: 0px 0px 16px 0px rgba(58, 216, 188, 0.102);
+ border-radius: 32px;
+ opacity: 1;
+ box-sizing: border-box;
+ position: absolute;
+ left: 760px;
+ top: 10px;
+ padding: 30px 44px;
+ .tptitl {
+ display: flex;
+ align-items: center;
+ > img {
+ width: 32px;
+ height: 22px;
+ margin-right: 8px;
+ }
+ }
+ .onebx1 {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ margin-top: 30px;
+ > div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ font-size: 14px;
+ font-size: #747474;
+ > img {
+ width: 62px;
+ height: 62px;
+ }
+ }
+ .item1 {
+ top: 140px;
+ left: 50px;
+ }
+ .item2 {
+ top: 140px;
+ left: 170px;
+ }
+ .item3 {
+ top: 270px;
+ left: 170px;
+ }
+ .item4 {
+ top: 10px;
+ left: 300px;
+ }
+ .item5 {
+ top: 140px;
+ left: 300px;
+ }
+ .item6 {
+ top: 10px;
+ left: 430px;
+ }
+ .item7 {
+ top: 140px;
+ left: 430px;
+ }
+ .item8 {
+ top: 270px;
+ left: 430px;
+ }
+ .upimg {
+ width: 15px;
+ height: 40px;
+ position: absolute;
+ left: 190px;
+ top: 230px;
+ }
+ .rigth1 {
+ width: 40px;
+ height: 15px;
+ position: absolute;
+ left: 0px;
+ top: 180px;
+ }
+ .rigth2 {
+ width: 40px;
+ height: 15px;
+ position: absolute;
+ left: 120px;
+ top: 180px;
+ }
+ .rigth3 {
+ width: 40px;
+ height: 15px;
+ position: absolute;
+ left: 375px;
+ top: 180px;
+ }
+ .rigth4 {
+ width: 40px;
+ height: 15px;
+ position: absolute;
+ left: 375px;
+ top: 50px;
+ }
+ .leftall {
+ width: 182px;
+ height: 540px;
+ position: absolute;
+ left: 350px;
+ top: 50px;
+ z-index: 99;
+ }
+ .rigthall {
+ width: 165px;
+ height: 270px;
+ position: absolute;
+ left: 250px;
+ top: 50px;
+ }
+ }
+ }
+ .buts {
+ width: 1380px;
+ height: 234px;
+ background: #ffffff;
+ box-shadow: 0 0 16px 0 rgba(0, 134, 241, 0.102);
+ border-radius: 32px;
+ opacity: 1;
+ position: absolute;
+ box-sizing: border-box;
+ left: 20px;
+ top: 540px;
+ padding: 30px 44px;
+ .tptitl {
+ display: flex;
+ align-items: center;
+ > img {
+ width: 32px;
+ height: 22px;
+ margin-right: 8px;
+ }
+ }
+ .onebx1{
+ width: 100%;
+ height: 100%;
+ position: relative;
+ margin-top: 30px;
+ > div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ font-size: 14px;
+ font-size: #747474;
+ > img {
+ width: 62px;
+ height: 62px;
+ }
+ }
+ .item1{
+ left: 1000px;
+ top:10px;
+ }
+ .item2{
+ left: 800px;
+ top:10px;
+ }
+ .item3{
+ left: 600px;
+ top:10px;
+ }
+ .item4{
+ left: 400px;
+ top:10px;
+ }
+ .left1{
+ width: 60px;
+ height: 15px;
+ position: absolute;
+ left: 900px;
+ top: 50px;
+ transform: rotate(180deg);
+ }
+ .left2{
+ width: 60px;
+ height: 15px;
+ position: absolute;
+ left: 700px;
+ top: 50px;
+ transform: rotate(180deg);
+ }
+ .left3{
+ width: 60px;
+ height: 15px;
+ position: absolute;
+ left: 500px;
+ top: 50px;
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
+ .tptitl{
+ color: #172E60;
+ }
+ .bx{
+ user-select: none;
+ }
\ No newline at end of file
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index f29530c6..05275d61 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -128,345 +128,347 @@