lisenzhou 2 лет назад
Родитель
Сommit
602751ffbf
2 измененных файлов: 66 добавлений и 53 удалений
  1. 24
    23
      public/heart.js
  2. 42
    30
      src/pages/pg4/plant.vue

+ 24
- 23
public/heart.js Просмотреть файл

@@ -1,26 +1,27 @@
1 1
 jQuery(document).ready(function ($) {
2
-    $("html,body").click(function (e) {
3
-        // var n = Math.round(Math.random() * 100);
4
-	var n = 1;
5
-	var $i = $("<b/>").text("+" + n);
6
-	var x = e.pageX,
7
-	    y = e.pageY;
8
-	$i.css({
9
-		"z-index": 99999,
10
-		  "top": y - 20,
11
-		  "left": x,
12
-		  "position": "absolute",
13
-		   "color": "#fff"
14
-        // "color": "#C6B0EA"
2
+    // $("html,body").click(function (e) {
3
+    //     // var n = Math.round(Math.random() * 100);
4
+    //     console.log(e,'==')
5
+	// var n = 1;
6
+	// var $i = $("<b/>").text("+" + n);
7
+	// var x = e.pageX,
8
+	//     y = e.pageY;
9
+	// $i.css({
10
+	// 	"z-index": 99999,
11
+	// 	  "top": y - 20,
12
+	// 	  "left": x,
13
+	// 	  "position": "absolute",
14
+	// 	   "color": "#fff"
15
+    //     // "color": "#C6B0EA"
15 16
        
16
-	});
17
-	$("body").append($i);
18
-		$i.animate({
19
-		     "top": y - 80,
20
-		     "opacity": 0
21
-		}, 1500, function () {
22
-		 $i.remove();
23
-	  });
24
-	  e.stopPropagation();
25
-	});
17
+	// });
18
+	// $("body").append($i);
19
+	// 	$i.animate({
20
+	// 	     "top": y - 80,
21
+	// 	     "opacity": 0
22
+	// 	}, 1500, function () {
23
+	// 	 $i.remove();
24
+	//   });
25
+	//   e.stopPropagation();
26
+	// });
26 27
 });

+ 42
- 30
src/pages/pg4/plant.vue Просмотреть файл

@@ -5,15 +5,20 @@
5 5
       <div class="content-item" v-for="(item, inx) in list" :key="inx">
6 6
         <div v-show="isChoise(item.name)">
7 7
           <img
8
-            class="shadow animate__animated animate__fadeIn popularity-values"
8
+            class="shadow animate__animated animate__fadeIn plus1"
9 9
             :src="item.img2"
10 10
             alt=""
11
-            @click="() => click(item)"
11
+            @click="(e) => click(item, e)"
12 12
           />
13 13
           <!-- <span class="num">已种植数量{{ contries[item.name] }}</span> -->
14 14
         </div>
15 15
         <div v-show="!isChoise(item.name)">
16
-          <img class="popularity-values" :src="item.img1" alt="" @click="() => click(item)" />
16
+          <img
17
+            class="plus1"
18
+            :src="item.img1"
19
+            alt=""
20
+            @click="(e) => click(item, e)"
21
+          />
17 22
         </div>
18 23
       </div>
19 24
       <div class="content-item">
@@ -42,45 +47,52 @@ const countryRef = ref();
42 47
 const flowerShow = ref();
43 48
 const planted = ref(false);
44 49
 const badgeShow = ref(false);
45
-let  timer = 'timer'
46 50
 
47
-const isChoise = (name) => {
48
-  // const
49
-  //   console.log(name, "==--");
50
-  return choise.value?.filter((x) => x === name)?.length > 0;
51
-};
52
-const  animate =(plus)=> {
53
-clearInterval(timer);
54
-timer = setInterval(function () {
55
-  plus--;
56
-  if (plus <= 0) {
57
-    clearInterval(timer);
58
-  }
59
-  let $i = $("<i>+1</i>");
60
-  $(".popularity-values").append($i);
51
+let timer = "timer";
52
+
53
+const animate = (plus, e) => {
54
+  // var _this = this;
55
+  console.log(e, "==");
56
+
57
+  var n = 1;
58
+  var $i = $("<b/>").text("+" + n);
59
+  var x = e.pageX,
60
+    y = e.pageY;
61
+  var n = 1;
62
+  var $i = $("<b/>").text("+" + n);
63
+  var x = e.pageX,
64
+    y = e.pageY;
65
+  $i.css({
66
+    "z-index": 99999,
67
+    top: y - 20,
68
+    left: x,
69
+    position: "absolute",
70
+    color: "#fff",
71
+    // "color": "#C6B0EA"
72
+  });
73
+  $("body").append($i);
61 74
   $i.animate(
62 75
     {
63
-      top: "-1.1rem",
64
-      right: "-0.9rem",
65
-      // "top": \'-55px\',
66
-      // "right": \'-45px\',
67
-      opacity: 0.1,
68
-      fontSize: "0.46rem",
76
+      top: y - 80,
77
+      opacity: 0,
69 78
     },
70
-    1800,
79
+    1500,
71 80
     function () {
72 81
       $i.remove();
73 82
     }
74 83
   );
75
-}, 800);
84
+  e.stopPropagation();
85
+};
86
+const isChoise = (name) => {
87
+  // const
88
+  //   console.log(name, "==--");
89
+  return choise.value?.filter((x) => x === name)?.length > 0;
76 90
 };
77 91
 
78
-
79
-const click = (item) => {
92
+const click = (item, e) => {
80 93
   const arr = choise.value;
81 94
   updateContries(item.name);
82
-  console.log(arr, "==");
83
-  animate(1);
95
+  animate(1, e);
84 96
   choise.value = [...new Set(arr.concat([item.name]))];
85 97
 };
86 98