Skip to content

H
huaxinDD
Commit 81e79551 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

Initial commit

parent fbcd196e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 751 additions and 67 deletions
package.json
View file @ 81e79551
...@@ -7,10 +7,15 @@ ...@@ -7,10 +7,15 @@
"build": "vue-cli-service build" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"axios": "^0.25.0",
"dayjs": "^1.11.19",
"echarts": "^5.2.2",
"element-ui": "^2.15.6",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
......
src/App.vue
View file @ 81e79551
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-01-27 18:06:31
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-04 10:49:17
* @FilePath: /test-ranqi/src/App.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template> <template>
<div id="app"> <div id="app">
<nav> <router-view />
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div> </div>
</template> </template>
<script>
export default {
name: "",
data() {
return {};
},
};
</script>
<style lang="scss"> <style lang="scss">
#app { html,
font-family: Avenir, Helvetica, Arial, sans-serif; body {
-webkit-font-smoothing: antialiased; margin: 0;
-moz-osx-font-smoothing: grayscale; padding: 0;
text-align: center; height: 100vh;
color: #2c3e50; width: 100%;
// overflow: hidden;
/* 隐藏垂直滚动条 */
// &::-webkit-scrollbar {
// width: 0;
// }
/* 隐藏水平滚动条 */
&::-webkit-scrollbar {
height: 0;
}
} }
nav { #app {
padding: 30px; width: 100%;
height: 100%;
background: black;
}
#nav {
// padding: 30px;
a { a {
font-weight: bold; font-weight: bold;
......
src/assets/rotate/bg.png 0 → 100644
View file @ 81e79551
This diff is collapsed.
src/main.js
View file @ 81e79551
import Vue from 'vue' /*
import App from './App.vue' * @Author: 纪泽龙 jizelong@qq.com
import router from './router' * @Date: 2026-01-04 10:42:29
import store from './store' * @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-01-04 10:54:28
* @FilePath: /huaxindd-web/src/main.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false import ElementUI from "element-ui";
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
import axios from "axios";
let dayjs = require("dayjs");
Vue.prototype.$dayjs = dayjs;
Vue.prototype.$axios = axios;
Vue.use(ElementUI);
// 挂载构造方法
Vue.prototype.$Vue = Vue;
Vue.config.productionTip = false;
new Vue({ new Vue({
router, router,
store, store,
render: h => h(App) render: (h) => h(App),
}).$mount('#app') }).$mount("#app");
src/router/index.js
View file @ 81e79551
import Vue from 'vue' /*
import VueRouter from 'vue-router' * @Author: your name
import HomeView from '../views/HomeView.vue' * @Date: 2022-01-11 13:44:17
* @LastEditTime: 2026-01-04 10:50:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/router/index.js
*/
import Vue from "vue";
import VueRouter from "vue-router";
// import Home from '../views/Home.vue'
import Ind from "../views/Ind/Ind.vue";
Vue.use(VueRouter) Vue.use(VueRouter);
const routes = [ const routes = [
{ {
path: '/', path: "/",
name: 'home', name: "Rotate",
component: HomeView component: Ind,
}, },
{ ];
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: "history",
base: process.env.BASE_URL, base: process.env.BASE_URL,
routes routes,
}) });
export default router export default router;
src/views/AboutView.vue deleted 100644 → 0
View file @ fbcd196e
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/HomeView.vue deleted 100644 → 0
View file @ fbcd196e
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
src/views/Ind/Ind.vue 0 → 100644
View file @ 81e79551
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:20:39
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2025-12-24 13:31:16
* @FilePath: /test-ranqi/src/views/Index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div
class="ind"
:style="{
transform: `scale(${scaleX},${scaleX})`,
top: `-${((1 - scaleX) * innerHeight) / 2}px`,
}"
>
<img class="img" :src="bg" alt="" />
<Top />
<Left />
<Right />
<div
class="center-rotate"
:style="{
top: innerWidth > 1920 ? '240px' : innerWidth <= 1600 ? '17%' : '230px',
}"
>
<!-- <div
class="scale"
:style="{
transform:
innerWidth >= 1920
? `scale(1.1)`
: innerWidth < 1600
? `scale(1)`
: `scale(${3* scaleX},${3 * scaleX})`,
}"
>
<Rotate />
</div> -->
<div
class="scale"
:style="{
transform:
innerWidth >= 1920
? `scale(1.5)`
: innerWidth < 1600
? `scale(1.1)`
: `scale(${1.8 * scaleX},${1.8 * scaleX})`,
}"
>
<Rotate />
</div>
</div>
</div>
</template>
<script>
import Top from "./components/Top.vue";
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";
import Rotate from "./components/Rotate.vue";
import bg from "@/assets/rotate/bg.png";
export default {
name: "",
components: {
Top,
Left,
Right,
Rotate,
},
data() {
return {
bg,
scaleX: 1,
innerWidth: 0,
innerHeight: 0,
};
},
computed: {},
watch: {},
created() {
this.innerWidth = window.innerWidth;
this.innerHeight = window.innerHeight;
console.log(window.innerWidth);
// this.scaleX = window.innerWidth / 2880;
this.scaleX = window.innerWidth / 1920;
},
methods: {},
};
</script>
<style lang="scss" scoped>
.ind {
// width:2880px;
width: 1920px;
height: 100vh;
background: black;
position: relative;
left: 50%;
top: 0px;
// margin-left: -1440px;
margin-left: -960px;
overflow: hidden;
}
.center-rotate {
// padding-top: 240px;
position: absolute;
width: 40%;
height: 100%;
z-index: 999;
left: 50%;
top: 20%;
margin-left: -20%;
}
.scale {
transform: scale(2.1);
}
.img {
opacity: 0.5;
height: 100%;
position: absolute;
// margin-left:-920px;
// height: 100vh;
pointer-events: none;
z-index: 9999;
}
</style>
src/views/Ind/components/Left.vue 0 → 100644
View file @ 81e79551
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2025-12-24 13:32:47
* @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="left">
<div class="time">
<div class="l">{{ YYYY }}</div>
<div>{{ HHHH }}</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
YYYY: null,
HHHH: null,
};
},
created() {
setInterval(() => {
this.YYYY = this.$dayjs().format("YYYY-MM-DD");
this.HHHH = this.$dayjs().format("HH:mm:ss");
});
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.left {
width: 20%;
top: 102px;
bottom: 50px;
background: url("~@/assets/index/l.png") no-repeat center;
background-size: 100% 100%;
position: absolute;
left: 40px;
z-index:9999;
.time {
font-size: 28px;
top:-88px;
display: flex;
position:absolute;
color: #fff;
.l{
margin-right:20px;
}
}
}
</style>
src/views/Ind/components/Right.vue 0 → 100644
View file @ 81e79551
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2025-12-24 13:32:56
* @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="right">
<img class="imgr" :src="d" alt="" />
</div>
</template>
<script>
import d from "@/assets/index/rt.png";
export default {
name: "",
data() {
return {
d,
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.right {
width: 20%;
position: absolute;
top: 102px;
bottom: 50px;
background: url("~@/assets/index/r.png") no-repeat center;
background-size: 100% 100%;
right: 40px;
z-index:9999;
.imgr {
position: absolute;
right: 0;
top: -88px;
}
}
</style>
src/views/Ind/components/Rotate.vue 0 → 100644
View file @ 81e79551
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-16 11:10:26
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2025-12-24 13:33:32
* @FilePath: /test-ranqi/src/views/Rotate.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="container">
<div
@mouseenter="imgScale = 1.2"
@mouseleave="imgScale = 1"
@dblclick="dbclick"
class="imgcenter-shadow"
></div>
<img
class="imgcenter"
:src="center"
:style="{ transform: `scale(${imgScale})` }"
alt=""
/>
<div class="out-box">
<div
v-for="item in imgArr"
:key="item.num"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
class="a"
:style="{
background: `url(${item.src}) no-repeat`,
backgroundSsize: '100% 100%;',
}"
></div>
<!-- <div class="a"></div> -->
<!-- 地图 -->
<div class="b"></div>
<!-- 两个圆圈 -->
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
</div>
</template>
<script>
// url(${item.src}) no-repeat
import center from "@/assets/rotate/center.png";
import a from "@/assets/rotate/a.png";
import b from "@/assets/rotate/b.png";
import c from "@/assets/rotate/c.png";
import d from "@/assets/rotate/d.png";
import e from "@/assets/rotate/e.png";
import f from "@/assets/rotate/f.png";
import g from "@/assets/rotate/g.png";
export default {
name: "",
data() {
return {
timer: null,
rotateNum: 0,
rotateNumb: 0,
imgScale: 1,
clickTimer: null,
imgArr: [
{ src: a, num: 1 },
{ src: b, num: 2 },
{ src: c, num: 3 },
{ src: d, num: 4 },
{ src: e, num: 5 },
{ src: f, num: 6 },
{ src: g, num: 7 },
],
center,
};
},
mounted() {
this.rotate();
},
methods: {
rotate() {
this.timer = setInterval(() => {
this.rotateNum += 0.1;
const outBox = document.querySelector(".out-box");
const b = document.querySelector(".b");
const c = document.querySelector(".c");
const d = document.querySelector(".d");
const e = document.querySelector(".e");
const imgcenterShadow = document.querySelector(".imgcenter-shadow");
const a = document.querySelectorAll(".a");
outBox.style.transform = `rotateY(${this.rotateNum}deg)`;
b.style.transform = ` rotateY(-${this.rotateNum}deg) translateZ(10px) `;
c.style.transform = `rotateX(90deg) translateZ(230px) rotateZ(${this.rotateNum}deg)`;
d.style.transform = `rotateX(90deg) translateZ(230px) rotateZ(${this.rotateNum}deg)`;
e.style.transform = `rotateX(90deg) translateZ(130px) rotateZ(${this.rotateNum}deg)`;
const degNum = 360 / this.imgArr.length;
a.forEach((item, index) => {
item.style.transform = ` rotateY(${
degNum * index
}deg) translateZ(300px) rotateY(-${
degNum * index + this.rotateNum
}deg)`;
});
}, 10);
},
dbclick() {
console.log("双击");
},
mouseenter() {
clearInterval(this.timer);
},
mouseleave() {
this.rotate();
},
},
};
</script>
<style lang="scss" scoped>
// body {
// // background: url("~@/assets/rotate/bg.png") no-repeat;
// width: 100%;
// height: 100%;
// }
.container {
perspective: 1400px;
transform-style: preserve-3d;
transform: rotateX(-15deg);
.qinxie {
}
}
.imgcenter {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
margin-left: -150px;
top: -220px;
transform-style: preserve-3d;
pointer-events: none;
transition: all 0.1s linear;
}
.imgcenter-shadow {
position: absolute;
width: 180px;
height: 200px;
background: red;
left: 50%;
margin-left: -100px;
top: -180px;
z-index: 999;
opacity: 0;
cursor: pointer;
}
.out-box {
position: relative;
// width: 100px;
// height: 100px;
margin: 300px auto;
// background: red;
transform-style: preserve-3d;
// animation: rotateDog .5s linear infinite;
&:hover {
// animation-play-state: paused;
}
& .a {
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: 1px;
height: 70px;
width: 50px;
z-index: 99900;
background: url("~@/assets/rotate/a.png") no-repeat;
background-size: 100% 100% !important;
cursor: pointer;
// transition: all 0.1s linear;
// background: blue;
&:hover {
position: absolute;
left: 50%;
top: 50%;
margin-top: -28px;
margin-left: -38px;
height: 100px;
width: 76px;
}
div {
text-align: center;
}
}
.b {
position: absolute;
left: 50%;
margin-left: -100px;
top: -100px;
transform-style: preserve-3d;
// background: blue;
height: 200px;
width: 200px;
transform: translateZ(200px) rotateX(-10deg);
z-index: -1;
pointer-events: none;
}
.c {
position: absolute;
left: 50%;
top: 0;
margin-left: -300px;
width: 600px;
height: 600px;
border-radius: 50%;
// border: 1px solid red;
// border-top-color: black;
background: url("~@/assets/rotate/bottomC.png") center no-repeat;
background-size: 100% 100%;
transform: rotateX(90deg) translateZ(250px);
}
.d {
position: absolute;
left: 50%;
top: 3px;
margin-left: -300px;
width: 600px;
height: 600px;
border-radius: 50%;
border: 1px solid rgba(89, 178, 245, 0.6);
box-shadow: 0px 3px 1px 2px rgba(89, 178, 245, 0.6); /* 添加阴影效果 */
// border-top-color: black;
// background: url("~@/assets/rotate/bottomD.png") center no-repeat;
transform: rotateX(90deg) translateZ(250px);
}
.e {
position: absolute;
left: 50%;
top: 0;
margin-left: -200px;
width: 400px;
height: 400px;
// border-radius: 50%;
// border: 1px solid red;
// border-top-color: black;
background: url("~@/assets/rotate/circleBg.png") center no-repeat;
background-size: 100% 100%;
transform: rotateX(90deg) translateZ(250px);
}
.a:nth-child(1) {
transform: translateZ(300px);
}
.a:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
.a:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
.a:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
.a:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
.a:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
}
@keyframes rotateDog {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
</style>
src/views/Ind/components/Top.vue 0 → 100644
View file @ 81e79551
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2025-12-24 13:32:15
* @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="top">
<img :src="top" alt="" />
</div>
</template>
<script>
import top from "@/assets/index/top.png";
export default {
name: "",
data() {
return {
top,
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.top {
width: 100%;
height: 102px;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
}
</style>
yarn.lock
View file @ 81e79551
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment