new
This commit is contained in:
huangjinming
parent
b69b6921d3
commit
4ed30964ee
2
.env.dev
Normal file
2
.env.dev
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
VUE_APP_BASE_API='https://game2006api-test.kingsome.cn'
|
||||||
|
VUE_APP_GPAL_API='http://192.168.100.83:4000/sns'
|
||||||
@ -1 +0,0 @@
|
|||||||
VITE_API_BASE_URL=http://localhost:3000
|
|
||||||
71
README.md
71
README.md
@ -1,3 +1,74 @@
|
|||||||
运行代码指令
|
运行代码指令
|
||||||
npm run dev
|
npm run dev
|
||||||
yarn run dev
|
yarn run dev
|
||||||
|
在Vue 3中重新实现并优化上述代码，可以按照以下步骤进行：
|
||||||
|
|
||||||
|
在Vue 3组件中，使用<iframe>标签嵌入你要显示的内容，例如：
|
||||||
|
html
|
||||||
|
Copy code
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<iframe :src="screenUrl" frameborder='0' allowfullscreen="true" scrolling="no" width="100%" height="100%"></iframe>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
其中，:src属性绑定的是iFrame要显示的网页链接，allowfullscreen属性用于在iFrame中开启全屏模式。
|
||||||
|
|
||||||
|
在Vue 3组件中，为需要全屏的元素添加点击事件。可以使用@click指令或者v-on:click指令来绑定点击事件，例如：
|
||||||
|
html
|
||||||
|
Copy code
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="top-left" @click="toggleFullScreen"></div>
|
||||||
|
<iframe :src="screenUrl" frameborder='0' allowfullscreen="true" scrolling="no" width="100%" height="100%"></iframe>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
其中，@click="toggleFullScreen"表示当点击元素时，会触发组件内的toggleFullScreen方法。
|
||||||
|
|
||||||
|
在Vue 3组件的methods属性中，定义toggleFullScreen方法，用于切换全屏状态。可以使用document.fullscreenElement属性来判断当前是否处于全屏状态，使用document.documentElement.requestFullscreen()方法来请求进入全屏状态，使用document.exitFullscreen()方法来退出全屏状态，例如：
|
||||||
|
html
|
||||||
|
Copy code
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
screenUrl: "https://www.example.com", // iFrame要显示的网页链接
|
||||||
|
isFullScreen: false // 记录全屏状态
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleFullScreen() {
|
||||||
|
if (this.isFullScreen) {
|
||||||
|
// 退出全屏
|
||||||
|
document.exitFullscreen();
|
||||||
|
this.isFullScreen = false;
|
||||||
|
} else {
|
||||||
|
// 进入全屏
|
||||||
|
const de = document.documentElement;
|
||||||
|
if (de.requestFullscreen) {
|
||||||
|
de.requestFullscreen();
|
||||||
|
} else if (de.mozRequestFullScreen) {
|
||||||
|
de.mozRequestFullScreen();
|
||||||
|
} else if (de.webkitRequestFullScreen) {
|
||||||
|
de.webkitRequestFullScreen();
|
||||||
|
} else if (de.msRequestFullscreen) {
|
||||||
|
de.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
this.isFullScreen = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
其中，isFullScreen属性用于记录全屏状态，toggleFullScreen方法用于切换全屏状态。注意，为了让iFrame在全屏状态下铺满整个屏幕，需要在iFrame的父元素上加上height: 100vh样式。另外，由于mozCancelFullScreen()方法在Firefox中已经被弃用，建议使用document.exitFullscreen()方法来退出全屏状态。
|
||||||
|
|
||||||
|
完整的Vue 3代码示例如下：
|
||||||
|
|
||||||
|
html
|
||||||
|
Copy code
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="top-left" @click="toggleFullScreen"></div>
|
||||||
|
<iframe :src="screenUrl" frameborder='0' allowfullscreen="true" scrolling="no" width="100%" height="100%"></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -2,11 +2,16 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Vue</title>
|
<title>Vite + Vue</title>
|
||||||
</head>
|
</head>
|
||||||
|
<script type="module">
|
||||||
|
import {Buffer} from 'buffer';
|
||||||
|
window.Buffer = Buffer;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
17399
package-lock.json
generated
Normal file
17399
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -4,21 +4,29 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite --host",
|
"dev": "vite --host --mode dev",
|
||||||
"build:dev": "vite build --mode development",
|
"build:dev": "vite build --mode dev",
|
||||||
"build:test": "vite build --mode test",
|
"build:test": "vite build --mode test",
|
||||||
"build:prod": "vite build --mode production"
|
"build:prod": "vite build --mode production"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@animxyz/core": "^0.6.6",
|
"@animxyz/core": "^0.6.6",
|
||||||
"@animxyz/vue3": "^0.6.7",
|
"@animxyz/vue3": "^0.6.7",
|
||||||
|
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
|
||||||
"@vueuse/core": "^9.12.0",
|
"@vueuse/core": "^9.12.0",
|
||||||
|
"@walletconnect/web3-provider": "^1.8.0",
|
||||||
"ant-design-vue": "^3.2.15",
|
"ant-design-vue": "^3.2.15",
|
||||||
"axios": "^1.3.3",
|
"axios": "^1.3.3",
|
||||||
|
"buffer": "^6.0.3",
|
||||||
"js-cookie": "^3.0.1",
|
"js-cookie": "^3.0.1",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"pinia": "^2.0.30",
|
"pinia": "^2.0.30",
|
||||||
|
"postcss-px-to-viewport": "^1.1.1",
|
||||||
|
"process": "^0.11.10",
|
||||||
|
"rollup-plugin-polyfill-node": "^0.12.0",
|
||||||
|
"stream-browserify": "^3.0.0",
|
||||||
"swiper": "8",
|
"swiper": "8",
|
||||||
|
"util": "^0.12.5",
|
||||||
"video.js": "^8.0.4",
|
"video.js": "^8.0.4",
|
||||||
"videojs-flash": "^2.2.1",
|
"videojs-flash": "^2.2.1",
|
||||||
"vue": "^3.2.45",
|
"vue": "^3.2.45",
|
||||||
|
|||||||
23
postcss.config.cjs
Normal file
23
postcss.config.cjs
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
'postcss-px-to-viewport': {
|
||||||
|
unitToConvert: 'px', // 需要转换的单位，默认为"px"
|
||||||
|
viewportWidth: 1920, // 设计稿的视口宽度
|
||||||
|
unitPrecision: 5, // 单位转换后保留的精度
|
||||||
|
propList: ['*'], // 能转化为vw的属性列表
|
||||||
|
viewportUnit: 'vw', // 希望使用的视口单位
|
||||||
|
fontViewportUnit: 'vw', // 字体使用的视口单位
|
||||||
|
selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
|
||||||
|
minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
|
||||||
|
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
|
||||||
|
replace: true, // 是否直接更换属性值，而不添加备用属性
|
||||||
|
exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
|
||||||
|
include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
|
||||||
|
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
|
||||||
|
landscapeUnit: 'vw', // 横屏时使用的单位
|
||||||
|
landscapeWidth: 1920 // 横屏时使用的视口宽度
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
50
src/api/User.js
Normal file
50
src/api/User.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
const GPAL_URL = import.meta.env.VUE_APP_GPAL_API;
|
||||||
|
|
||||||
|
export const defaultUser = {
|
||||||
|
id: '',
|
||||||
|
username: '',
|
||||||
|
showname: '',
|
||||||
|
comment: '',
|
||||||
|
locked: false,
|
||||||
|
password: '',
|
||||||
|
avatar: '',
|
||||||
|
account: ''
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param data {account: string, token: string}
|
||||||
|
*/
|
||||||
|
export const getUserInfo = (data) =>
|
||||||
|
request({
|
||||||
|
url: '/webapp/index.php?c=BcUser&a=info',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
|
||||||
|
export const login = (data) =>
|
||||||
|
request({
|
||||||
|
url: '/webapp/index.php?c=Market&a=auth',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
|
||||||
|
export const logout = () =>
|
||||||
|
request({
|
||||||
|
url: '/api/user/logout',
|
||||||
|
method: 'post'
|
||||||
|
})
|
||||||
|
//
|
||||||
|
// export const changePass = (params: any) =>
|
||||||
|
// request({
|
||||||
|
// url: '/api/user/passwd',
|
||||||
|
// method: 'post',
|
||||||
|
// data: params
|
||||||
|
// })
|
||||||
|
|
||||||
|
export const getNonce = (params) =>
|
||||||
|
request({
|
||||||
|
url: '/webapp/index.php?c=Market&a=getNonce',
|
||||||
|
method: 'get',
|
||||||
|
params: params
|
||||||
|
})
|
||||||
@ -12,14 +12,41 @@
|
|||||||
>
|
>
|
||||||
<span> {{ nav.name }}</span></a
|
<span> {{ nav.name }}</span></a
|
||||||
>
|
>
|
||||||
<div class="login-btn login-btn-active">LOGIN</div>
|
<div class="login-btn login-btn-active" @click="login">LOGIN</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<ChainModel></ChainModel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from "vue";
|
import { ref, reactive, onMounted ,} from "vue";
|
||||||
|
import { useChainStore }from '@/store/chain';
|
||||||
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
import ChainModel from './ChainModel.vue'
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const chain = useChainStore();
|
||||||
|
|
||||||
|
function click(event) {
|
||||||
|
router.push(event.key);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
async function login(event) {
|
||||||
|
if (!chain.logined) {
|
||||||
|
// 没有登录情况下执行登录
|
||||||
|
await chain.chainManager.login()
|
||||||
|
console.log("logined:", chain.chainManager.isLogined);
|
||||||
|
chain.logined = chain.chainManager.isLogined;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
// 已经登录过就退出登录
|
||||||
|
await chain.chainManager.logout();
|
||||||
|
console.log("logined:", chain.chainManager.isLogined);
|
||||||
|
chain.logined = chain.chainManager.isLogined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const curentid = ref(0);
|
const curentid = ref(0);
|
||||||
const navList = reactive([
|
const navList = reactive([
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
@cancel="handleCancel"
|
@cancel="handleCancel"
|
||||||
@ok="handleOk"
|
@ok="handleOk"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
width="70%"
|
width="100vw"
|
||||||
>
|
>
|
||||||
<div class="video-content">
|
<div class="video-content">
|
||||||
<video
|
<video
|
||||||
@ -52,5 +52,16 @@ function open() {
|
|||||||
video{
|
video{
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:deep(.ant-modal) {
|
||||||
|
width: 100vw !important;
|
||||||
|
max-width: 100vw !important;
|
||||||
|
top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-modal-body) {
|
||||||
|
height: calc(100vh - 55px - 53px);
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
// import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
|
|
||||||
import glodata from '@/store/user_global';
|
import glodata from '@/store/user_global';
|
||||||
|
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue";
|
|||||||
import requireTransform from "vite-plugin-require-transform";
|
import requireTransform from "vite-plugin-require-transform";
|
||||||
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
|
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
|
||||||
import { resolve } from "path";
|
import { resolve } from "path";
|
||||||
|
import nodePolyfills from 'rollup-plugin-polyfill-node';
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
@ -15,8 +16,14 @@ export default defineConfig({
|
|||||||
|
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
"@": resolve(__dirname, "src"), // 设置 `@` 指向 `src` 目录
|
'@' : resolve(__dirname, 'src'),
|
||||||
|
process: "process/browser",
|
||||||
|
stream: "stream-browserify",
|
||||||
|
zlib: "browserify-zlib",
|
||||||
|
util: 'util',
|
||||||
|
web3: resolve(__dirname, 'node_modules/web3/dist/web3.min.js')
|
||||||
},
|
},
|
||||||
|
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
|
||||||
},
|
},
|
||||||
base: "./", // 设置打包路径
|
base: "./", // 设置打包路径
|
||||||
build: {
|
build: {
|
||||||
@ -33,8 +40,28 @@ export default defineConfig({
|
|||||||
// 环境变量
|
// 环境变量
|
||||||
env: {
|
env: {
|
||||||
BASE_URL: process.env.VITE_API_BASE_URL
|
BASE_URL: process.env.VITE_API_BASE_URL
|
||||||
|
},
|
||||||
|
sourcemap: true,
|
||||||
|
rollupOptions: {
|
||||||
|
plugins: [nodePolyfills()],
|
||||||
|
},
|
||||||
|
commonjsOptions: {
|
||||||
|
transformMixedEsModules: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
envPrefix:"VUE_APP_",
|
||||||
|
optimizeDeps: {
|
||||||
|
esbuildOptions: {
|
||||||
|
define: {
|
||||||
|
global: "globalThis",
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
define: {
|
||||||
|
'process.env': process.env
|
||||||
|
},
|
||||||
server: {
|
server: {
|
||||||
port: 4000, // 设置服务启动端口号
|
port: 4000, // 设置服务启动端口号
|
||||||
open: false, // 设置服务启动时是否自动打开浏览器
|
open: false, // 设置服务启动时是否自动打开浏览器
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user