parent
7a064b0a0a
commit
228dd80da5
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||
@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>五组项目成本估算</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "projectstory",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.4.37"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"vite": "^5.4.1"
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,10 @@
|
||||
<script setup>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HelloWorld/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
@ -0,0 +1,107 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
|
||||
const draggingIndex = ref(-1)
|
||||
const images = ref([
|
||||
{ id: 1, x: 100, y: 400 },
|
||||
{ id: 2, x: 200, y: 400 },
|
||||
{ id: 3, x: 300, y: 400 },
|
||||
{ id: 4, x: 400, y: 400 },
|
||||
{ id: 5, x: 500, y: 400 }
|
||||
])
|
||||
|
||||
const num = [0,1,2,3,5,8,13,"?"];
|
||||
|
||||
const startDrag = (index, event) => {
|
||||
draggingIndex.value = index
|
||||
}
|
||||
|
||||
const onDrag = (event) => {
|
||||
if (draggingIndex.value !== -1) {
|
||||
images.value[draggingIndex.value].x = event.clientX - 25
|
||||
images.value[draggingIndex.value].y = event.clientY - 25
|
||||
}
|
||||
}
|
||||
|
||||
const endDrag = () => {
|
||||
draggingIndex.value = -1
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousemove', onDrag)
|
||||
document.addEventListener('mouseup', endDrag)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="container" @mousemove="onDrag" @mouseup="endDrag">
|
||||
<h1>敏捷项目成本估算</h1>
|
||||
<table>
|
||||
<thead>
|
||||
<td>故事点</td>
|
||||
<td v-for="(value,index) in num" :key="index">{{value}}</td>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in 3" :key="row">
|
||||
<td>第{{row}}轮</td>
|
||||
<td v-for="col in 8" :key="col"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<img v-for="(image, index) in images"
|
||||
:key="image.id"
|
||||
:src="`/src/assets/pic/${index + 1}.png`"
|
||||
class="draggable-image"
|
||||
:style="{ left: image.x + 'px', top: image.y + 'px' }"
|
||||
@mousedown="startDrag(index, $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid red;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
border-left: none;
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
border-left: 1px solid red;
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.draggable-image {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,4 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
Binary file not shown.
Loading…
Reference in new issue