拼图详情

package.json

@@ -12,10 +12,13 @@
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.6",
+    "echarts": "^5.1.2",
+    "echarts-liquidfill": "^3.0.0",
     "vant": "^2.12.22",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "vusui-layer": "^1.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/main.js

@@ -2,8 +2,8 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
 import "./plugins/axios.js"
+
 // import axios from "axios"
 //区别开发环境和测试环境
 // axios.defaults.baseURL=process.env.VUE_APP_APIURL

src/router/index.js

@@ -50,10 +50,28 @@ const routes = [
       title:'矿井水处理'
     }
   },
+  //宁东运营部拼图游戏
+  {
+    path:"/ningdongyunying/puzzle/puzzle",
+    name:'puzzle',
+    component:()=>import('../views/ningdongyunying/puzzle/puzzle.vue'),
+    meta:{
+      title:'拼图游戏'
+    }
+  },
+  //宁东运营部拼图游戏详情
+  {
+    path:"/ningdongyunying/puzzle/puzzle-info",
+    name:'puzzle-info',
+    component:()=>import('../views/ningdongyunying/puzzle/puzzle-info.vue'),
+    meta:{
+      title:'拼图游戏'
+    }
+  },
   //路由重定向
   {
     path:'/',
-    redirect:{"name":"kuangjingshui"}
+    redirect:{"name":"puzzle-info"}
   }
 ]
 

src/views/ningdongyunying/puzzle/puzzle-info.vue

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <div v-if="show">
+      <van-nav-bar title="互动学习" left-arrow @click-left="onClickLeft" />
+    </div>
+    <div class="headers">
+      <img src="../../../assets/images/ningdongyunying/puzzle/抬头.png" />
+      <div class="headers-left">5</div>
+      <div class="headers-right">4</div>
+      <div class="header-content">
+        <div
+          style="width: 100px; height: 100px"
+          ref="hygrometer"
+          id="hygrometer"
+        ></div>
+      </div>
+    </div>
+
+    <div class="footed">
+      <div class="footed-img">
+        <img src="../../../assets/images/ningdongyunying/puzzle/下边云.png" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts"; //引入echarts
+import "echarts-liquidfill";
+export default {
+  data() {
+    return {
+      show: true,
+      chart: null,
+    };
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#39f"; //背景色
+    this.drawLiquidfill();
+  },
+  methods: {
+    drawLiquidfill() {
+      // 基于准备好的dom，初始化echarts实例
+      let hygrometer = echarts.init(document.getElementById("hygrometer"));
+      // 使用指定的配置项和数据显示图表
+      hygrometer.setOption({
+        tooltip: {
+          show: true,
+        },
+        direction: 'none',
+        series: [
+          {
+            name: "睡了",
+            type: "liquidFill",
+            radius: "80px",
+            data: [0.45],
+            label: {
+              normal: {
+                color: "#ff7900",
+                insideColor: "#ff7900",
+                textStyle: {
+                  fontSize: 20,
+                  fontWeight: "bold",
+                },
+              },
+            },
+            backgroundStyle: {
+              color: "#fff",
+            },
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 1,
+                x2: 0,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: ["#ffff00"], // 0% 处的颜色
+                  },
+                  {
+                    offset: 0,
+                    color: ["#ffff00"], // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            ],
+            outline: {
+              show: true,
+              borderDistance: 0,
+              itemStyle: {
+                borderColor: "#fdd35d",
+                borderWidth: 3,
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+.footed {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+}
+.footed > .footed-img {
+  width: 100%;
+  height: 76px;
+  position: fixed;
+  bottom: 0;
+  z-index: -1;
+}
+.footed-img > img {
+  width: 100%;
+  height: 76px;
+}
+.headers {
+  width: 95%;
+  margin: 2% auto;
+  position: relative;
+}
+.headers > img {
+  width: 100%;
+  z-index: -1;
+}
+.headers-left {
+  width: 20%;
+  text-align: center;
+  position: absolute;
+  left: 4%;
+  top: 37%;
+  font-size: 30px;
+  color: #fbd91f;
+}
+.headers-right {
+  width: 20%;
+  text-align: center;
+  position: absolute;
+  left: 76%;
+  top: 37%;
+  font-size: 30px;
+  color: #fbd91f;
+}
+.header-content {
+  position: absolute;
+  left: 36%;
+  top: 31%;
+}
+</style>

src/views/ningdongyunying/puzzle/puzzle.vue

@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <div v-if="show">
+      <van-nav-bar title="互动学习" left-arrow @click-left="onClickLeft" />
+    </div>
+    <div class="kj">
+      <div class="kj-position">
+        <img src="../../../assets/images/ningdongyunying/puzzle/单位.png" />
+        <p class="mk">梅花井煤矿</p>
+      </div>
+      <div class="kj-background " id="kj-backgrounds">
+        <div class="kj-background-header">有效时间:2021.7.6-2021.7.21</div>
+        <div class="kj-content">
+          <p>专题标题专题标题专题标题专题标题专题标题</p>
+          <div class="kj-content-item">
+            <img
+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div class="kj-progress">
+          <div class="kj-progress-item">
+            <van-progress :percentage="50" color="#00fff8" :show-pivot="false"/>
+          </div>
+          <span>50%</span>
+        </div>
+      </div>
+      <div class="kj-background">
+        <div class="kj-background-header1">有效时间:2021.7.6-2021.7.21</div>
+        <div class="kj-content">
+          <p>专题标题专题标题专题标题专题标题专题标题</p>
+          <div class="kj-content-item">
+            <img
+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div class="kj-progress">
+          <div class="kj-progress-item">
+            <van-progress :percentage="50" color="#00fff8" :show-pivot="false"/>
+          </div>
+          <span>50%</span>
+        </div>
+      </div>
+    </div>
+    <div class="kj">
+      <div class="kj-position">
+        <img src="../../../assets/images/ningdongyunying/puzzle/单位.png" />
+        <p class="mk">单位</p>
+      </div>
+      <div class="kj-background1 " id="kj-backgrounds1">
+        <div class="kj-background-header">有效时间:2021.7.6-2021.7.21</div>
+        <div class="kj-content">
+          <p>专题标题专题标题专题标题专题标题专题标题</p>
+          <div class="kj-content-item">
+            <img
+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div class="kj-progress">
+          <div class="kj-progress-item">
+            <van-progress :percentage="50" color="#fea201" :show-pivot="false"/>
+          </div>
+          <span>50%</span>
+        </div>
+      </div>
+      <div class="kj-background1 " >
+        <div class="kj-background-header1">有效时间:2021.7.6-2021.7.21</div>
+        <div class="kj-content">
+          <p>专题标题专题标题专题标题专题标题专题标题</p>
+          <div class="kj-content-item">
+            <img
+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div class="kj-progress">
+          <div class="kj-progress-item">
+            <van-progress :percentage="50" color="#fea201" :show-pivot="false"/>
+          </div>
+          <span>50%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {} from "../../../assets/images/ningdongyunying/puzzle/单位.png";
+import { getAllUrlParams } from "../../xixuanzhongxin/plugins/admin/url-encapsulation.js"; //获取url上的token和tabber
+export default {
+  data() {
+    return {
+      show: true,
+      token: sessionStorage.getItem("mytoken")
+        ? sessionStorage.getItem("mytoken")
+        : "", //token值保存在本地，有的话取值，没有为空
+    };
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#39f"; //背景色
+    this.gettoken = getAllUrlParams(window.location.href).token; //获取到url上的token
+    this.token = `Bearer ${this.gettoken}`; //获取token值
+    sessionStorage.setItem("mytoken", this.token); //存入token值
+    // this.show = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
+  },
+  methods: {
+    //tabber返回按钮
+    onClickLeft() {
+      window.history.back();
+    },
+
+  },
+};
+</script>
+
+<style scoped>
+.van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+.kj {
+  width: 90%;
+  height: 250px;
+  margin: 5% auto 10%;
+  background: #fff;
+  border: 2px solid #242290;
+  border-radius: 5px;
+  position: relative;
+}
+.kj > .kj-position {
+  width: 40%;
+  height: 45px;
+  position: absolute;
+  top: -10%;
+  left: 8%;
+  text-align: center;
+}
+.kj-position > img {
+  width: 100%;
+}
+.kj-position > .mk {
+  font-size: 20px;
+  color: #06a3f4;
+  font-weight: 600;
+  text-shadow: 0px 2px 0px #fff;
+  margin-top: -26%;
+}
+#kj-backgrounds{
+    margin-top: 9%;
+}
+.kj-background {
+  width: 95%;
+  height: 95px;
+  background: url("../../../assets/images/ningdongyunying/puzzle/蓝框.png");
+  background-size: cover;
+  margin: 5% auto ;
+  border: 1px solid transparent;
+}
+.kj-background-header {
+  width: 54%;
+  height: 19px;
+  background: url("../../../assets/images/ningdongyunying/puzzle/限时黄.png");
+  background-size: cover;
+  margin-top: 3%;
+  margin-left: 3%;
+  font-size: 10px;
+  text-align: center;
+}
+.kj-content {
+  width: 95%;
+  height: 40px;
+  display: flex;
+  justify-content: left;
+  margin-left: 3%;
+}
+.kj-content > p {
+  width: 85%;
+  color: #fff;
+}
+.kj-content > .kj-content-item {
+  width: 18%;
+  padding-left: 2%;
+}
+.kj-content-item > img {
+  width: 40px;
+}
+.kj-content-size {
+  font-size: 30px;
+}
+.kj-progress {
+  width: 95%;
+  display: flex;
+  justify-content: left;
+  margin-left: 3%;
+}
+.kj-progress .kj-progress-item {
+  width: 84%;
+  margin-top: 3%;
+}
+.kj-progress > span {
+  font-size: 10px;
+  margin-top: 1%;
+  margin-left: 2%;
+  color: #fff;
+}
+.kj-background-header1 {
+  width: 54%;
+  height: 19px;
+  background: url("../../../assets/images/ningdongyunying/puzzle/限时灰.png");
+  background-size: cover;
+  margin-top: 3%;
+  margin-left: 3%;
+  font-size: 10px;
+  text-align: center;
+}
+#kj-backgrounds1{
+    margin-top: 9%;
+}
+.kj-background1 {
+  width: 95%;
+  height: 95px;
+  background: url("../../../assets/images/ningdongyunying/puzzle/黄框.png");
+  background-size: cover;
+  margin: 5% auto ;
+  border: 1px solid transparent;
+}
+.kj-background1>.kj-background-header{
+  width: 54%;
+  height: 19px;
+  background: url("../../../assets/images/ningdongyunying/puzzle/限时蓝.png");
+  background-size: cover;
+  margin-top: 3%;
+  margin-left: 3%;
+  font-size: 10px;
+  text-align: center;
+}
+.kj-background1>.kj-content > p{
+  color: black;
+}
+</style>

yarn.lock

@@ -3204,6 +3204,19 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts-liquidfill@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/echarts-liquidfill/-/echarts-liquidfill-3.0.0.tgz#1d41e6cd4016281b525f2f7b5be7879deffa821d"
+  integrity sha512-asBu62Zxpod9ZRYHweBoBvp7e+XtQbQoha19aTEJf2UptJJ2Bppcx8TdwQZnTjPM9s/yYD6Tk4/qcRqZ6s8HZA==
+
+echarts@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.1.2.tgz#aa1ab0cef5b74fa2f7c620261a5f286893d30fd1"
+  integrity sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==
+  dependencies:
+    tslib "2.0.3"
+    zrender "5.1.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -7320,6 +7333,11 @@ ts-pnp@^1.1.6:
   resolved "https://registry.npm.taobao.org/ts-pnp/download/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha1-pQCtCEsHmPHDBxrzkeZZEshrypI=
 
+tslib@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.nlark.com/tty-browserify/download/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -7666,6 +7684,11 @@ vuex@^3.4.0:
   resolved "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
   integrity sha1-I2vAhqhww655lG8QfxbeWdWJXnE=
 
+vusui-layer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vusui-layer/-/vusui-layer-1.0.0.tgz#62b7d71bbcd6bdf30c94d16922b44d753dd96940"
+  integrity sha512-+qFJoF9Ug5bjeWXthtpZi7Z0zJDq/qyxWIIioOGyLun6TVxqJyzSSV1ghyiK5wfZep75sC+yXsvNr8rFpwR4xA==
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.nlark.com/watchpack-chokidar2/download/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
@@ -7988,3 +8011,10 @@ yargs@^16.0.0:
     string-width "^4.2.0"
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
+
+zrender@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.1.1.tgz#0515f4f8cc0f4742f02a6b8819550a6d13d64c5c"
+  integrity sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==
+  dependencies:
+    tslib "2.0.3"