You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
4.4 KiB
106 lines
4.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>09sudoku</title>
|
|
<!-- 导入 Vue 3 -->
|
|
<script src="https://cdn.staticfile.org/vue/3.2.26/vue.global.prod.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/vue-router/4.0.12/vue-router.global.prod.min.js"></script>
|
|
|
|
<!-- 导入组件库 -->
|
|
<script src="../cdn/dist/index.full.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
|
|
<!-- 滚动插件 -->
|
|
<script type="text/javascript" src="./js/vue3-seamless-scroll.min.js"></script>
|
|
<link rel="stylesheet" href="../cdn/theme-chalk/index.css" />
|
|
<link rel="stylesheet" href="./css/index.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" >
|
|
|
|
<div style="height: 200px;width: 200px;border: 1px solid red;">
|
|
|
|
<div style="height: 100%;">
|
|
<vue3-seamless-scroll :list="['1','2','3','4','5']" :step="1" hover>
|
|
|
|
<div style="height: 50px;height: 50px;background: red;"></div>
|
|
<div style="height: 50px;height: 50px;background: blue;"></div>
|
|
<div style="height: 50px;height: 50px;background: orange;"></div>
|
|
<div style="height: 50px;height: 50px;background: green;"></div>
|
|
<div style="height: 50px;height: 50px;background: purple;"></div>
|
|
|
|
|
|
</vue3-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
|
|
const App = {
|
|
data() {
|
|
return {
|
|
list1:['1','2','3','4','5','6'],
|
|
list: [
|
|
{
|
|
num: 1, schoolName: '长春市第一实验小学1',
|
|
projectList:
|
|
[{ projectName: '项目立项', projectCount: 2, className: 'aaa' }, { projectName: '招标采购', projectCount: 3 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 5 }],
|
|
completionRate: 100
|
|
},
|
|
{
|
|
num: 2, schoolName: '长春市十一高中',
|
|
projectList:
|
|
[{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }],
|
|
completionRate: 98
|
|
},
|
|
{
|
|
num: 3, schoolName: '长春市第一实验小学',
|
|
projectList:
|
|
[{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }],
|
|
completionRate: 90
|
|
},
|
|
{
|
|
num: 4, schoolName: '长春市十一高中',
|
|
projectList:
|
|
[{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }],
|
|
completionRate: 88
|
|
},
|
|
{
|
|
num: 5, schoolName: '长春市第六中学',
|
|
projectList:
|
|
[{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }],
|
|
completionRate: 79
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getWnfb();
|
|
|
|
|
|
},
|
|
methods: {
|
|
getWnfb() {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
const app = Vue.createApp(App);
|
|
app.use(ElementPlus);
|
|
app.component('Vue3SeamlessScroll', Vue3SeamlessScroll.Vue3SeamlessScroll);
|
|
app.mount("#app");
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |