朱鑫波 4 anni fa
parent
commit
546bc22193

+ 0 - 18
src/views/modules/kuaishouapp/account/stepForm/Step3.vue

@@ -550,24 +550,6 @@ li.chouzhen.first:before {
           <a-button key="back" @click="handleCancel">关闭</a-button>
         </div>
       </div>
-      <!-- <div style="position: absolute; top: 20px;left:10px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 50px;left:20px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 70px;left:50px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 90px;left:100px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 110px;left:60px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 130px;left:470px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 150px;left:300px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 170px;left:370px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 190px;left:210px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 160px;left:190px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 260px;left:110px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 280px;left:400px;font-size:20px">起量</div>
-      <div style="position: absolute; top: 300px;left:330px;font-size:20px">起量</div> -->
-
-      <!-- <template slot="footer">
-        <a-button key="back" @click="handleCancel">关闭</a-button>
-        <a-button key="submit" type="primary" @click="handleOk"> 返回列表 </a-button>
-      </template> -->
     </a-modal>
     <a-modal
       :maskClosable="false"

+ 215 - 17
src/views/modules/kuaishouapp/account/stepForm/Step4.vue

@@ -474,7 +474,7 @@ li.chouzhen.first:before {
       <a-button type="primary" @click="handleSubmit" :loading="loading">提交</a-button>
     </a-form-item>
     <checkMatemal ref="check" @showVideo="showData"></checkMatemal>
-    <a-modal :maskClosable="false" v-model="visible" title="广告创意创建情况">
+    <!-- <a-modal :maskClosable="false" v-model="visible" title="广告创意创建情况">
       <div style="font-size: 24px">
         {{ allForm.success }}
       </div>
@@ -483,6 +483,24 @@ li.chouzhen.first:before {
         <a-button key="back" @click="handleCancel">关闭</a-button>
         <a-button key="submit" type="primary" @click="handleOk">返回列表</a-button>
       </template>
+    </a-modal> -->
+     <a-modal :maskClosable="false" v-model="visible" :footer="null" :width="520">
+      <div style="width: 100%; height: 329px; display: flex; flex-flow: column">
+        <main
+          class="container"
+          style="width: 100%; text-align: center; margin: 66px auto 24px; font-size: 30px; font-weight: 100"
+        >
+          <h2 data-splitting class="headline headline--yell" style="color: red">起量</h2>
+        </main>
+
+        <div style="width: 100%; text-align: center; font-size: 24px; margin-bottom: 65px">
+          <img src="@/assets/success.png" alt="" style="width: 24px; margin-right: 10px" />创建成功
+        </div>
+        <div style="width: 100%; margin-bottom: 43px; display: flex; justify-content: center">
+          <a-button key="submit" type="primary" @click="handleOk" style="margin-right: 8px"> 返回列表 </a-button>
+          <a-button key="back" @click="handleCancel">关闭</a-button>
+        </div>
+      </div>
     </a-modal>
     <a-modal
       :maskClosable="false"
@@ -1326,7 +1344,7 @@ export default {
               }),
             })
             this.creativeTagVisible = false
-          }else{
+          } else {
             this.$message.error('选择出错,请稍后选择或自行手填')
           }
         })
@@ -1700,23 +1718,12 @@ export default {
             if (res.success) {
               this.loading = false
               this.visible = true
-              this.allForm.success = '创建成功'
-              // if (localStorage.getItem('originality')) {
-              //   this.$router.replace({
-              //     path: '/account/originality',
-              //   })
-              // } else {
-              //   this.$router.replace({
-              //     path: '/account/accountIndex',
-              //   })
-              // }
+              this.$nextTick(() => {
+                Splitting()
+              })
             } else {
               this.loading = false
               this.$message.error(res.message)
-              this.loading = false
-              this.visible = true
-              this.allForm.fail = res.message
-              this.allForm.success = '创建失败'
             }
           })
         }
@@ -2365,5 +2372,196 @@ export default {
   },
 }
 </script>
-<style lang="scss">
+<style lang="scss" scope>
+$colors: #f9ca24, #3498db, #ff7979, #1abc9c, #e74c3c, #f8c291;
+
+/* Recommended styles for Splitting */
+.splitting .word,
+.splitting .char {
+  display: inline-block;
+}
+
+/* Psuedo-element chars */
+.splitting .char {
+  position: relative;
+}
+
+/**
+ * Populate the psuedo elements with the character to allow for expanded effects
+ * Set to `display: none` by default; just add `display: block` when you want
+ * to use the psuedo elements
+ */
+.splitting .char::before,
+.splitting .char::after {
+  content: attr(data-char);
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  transition: inherit;
+  user-select: none;
+}
+
+/* Expanded CSS Variables */
+
+.splitting {
+  /* The center word index */
+  --word-center: calc((var(--word-total) - 1) / 2);
+
+  /* The center character index */
+  --char-center: calc((var(--char-total) - 1) / 2);
+
+  /* The center character index */
+  --line-center: calc((var(--line-total) - 1) / 2);
+}
+
+.splitting .word {
+  /* Pecent (0-1) of the word's position */
+  --word-percent: calc(var(--word-index) / var(--word-total));
+
+  /* Pecent (0-1) of the line's position */
+  --line-percent: calc(var(--line-index) / var(--line-total));
+}
+
+.splitting .char {
+  /* Percent (0-1) of the char's position */
+  --char-percent: calc(var(--char-index) / var(--char-total));
+
+  /* Offset from center, positive & negative */
+  --char-offset: calc(var(--char-index) - var(--char-center));
+
+  /* Absolute distance from center, only positive */
+  --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center));
+
+  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
+  --distance-sine: calc(var(--char-offset) / var(--char-center));
+
+  /* Distance from center where 1 is far left/far right, 0 is center */
+  --distance-percent: calc((var(--distance) / var(--char-center)));
+}
+
+* {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+
+// html, body {
+//   height: 100%;
+// }
+
+.headline {
+  align-items: center;
+  // background-color: var(--color);
+  display: flex;
+  font-family: 'Lexend Deca', sans-serif;
+  font-weight: 400;
+  // font-size: calc(1rem + 15vmin);
+  height: 72px;
+  justify-content: center;
+  // overflow: hidden;
+  perspective: 1000px;
+  scroll-snap-align: start;
+  width: 100%;
+}
+
+.word,
+.char {
+  animation-delay: var(--del);
+  animation-direction: var(--dir, normal);
+  animation-duration: var(--dur);
+  animation-iteration-count: infinite;
+  animation-name: var(--name);
+  animation-timing-function: var(--tf);
+  display: inline-block;
+  position: relative;
+  transform-origin: 50% 100%;
+  z-index: 1;
+}
+
+// =========================
+// Headline animations
+// =========================
+
+.headline--yell .char {
+  --name: yell;
+  --dur: 2s;
+  --tf: ease;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+@-webkit-keyframes yell {
+  3% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  6% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  12% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  18% {
+    -webkit-transform: scaleY(1) translateY(-2%);
+    transform: scaleY(1) translateY(-2%);
+  }
+  25% {
+    -webkit-transform: scaleY(0.98);
+    transform: scaleY(0.98);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  75% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+  }
+}
+@keyframes yell {
+  3% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  6% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  12% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  18% {
+    -webkit-transform: scaleY(1) translateY(-2%);
+    transform: scaleY(1) translateY(-2%);
+  }
+  25% {
+    -webkit-transform: scaleY(0.98);
+    transform: scaleY(0.98);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  75% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+  }
+}
 </style>

+ 2 - 2
vue.config.js

@@ -74,7 +74,7 @@ module.exports = {
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
 
         // target: 'http://192.168.1.74:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
-        target: 'http://192.168.1.43:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
+        // target: 'http://192.168.1.43:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.0.252:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
         
         // target: 'http://192.168.0.170:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
@@ -82,7 +82,7 @@ module.exports = {
         // target: 'http://192.168.1.219:8080', //请求本地 需要jeecg-boot后台项目  赵西安
 
 
-        //  target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
+         target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目