TiaoZhan_Homework/3/index.html

55 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello 挑战网</title>
<link rel="stylesheet" type="text/css" href="./src/index.css">
<link rel="stylesheet" href="./src/ backdrop.css" />
</head>
<body>
<div id="app" class="container" v-cloak>
<div class="con">
<div class="left list">
<div id="leftlist" class="ll">
<div v-for="(item,index) in list1" :key="item" :style="{'color':item.color}" @click="move_right(index)"
class="card">
{{ item.name }}
</div>
</div>
</div>
<div class="right list">
<div id="rightlist" class="ll">
<div v-for="(item,index) in list2" :key="item" :style="{'color':item.color}" @click="move_left(index)"
class="card">
{{ item.name }}
</div>
</div>
</div>
</div>
<div class="control">
<input type="text" class="ti" @click="change_color()">
<div class="buts">
<button class="add_left but" @click="add_left()">ADD LEFT</button>
<button class="add_right but" @click="add_right()">ADD RIGHT</button>
</div>
<div class="buts">
<button class="move_left but" @click="move_right()">MOVE TO RIGHT</button>
<button class="move_right but" @click="move_left()">MOVE TO LEFT</button>
</div>
<div class="buts">
<button class="random_left but" @click="random_left()">RANDOM LEFT</button>
<button class="random_right but" @click="random_right()">RANDOM RIGHT</button>
</div>
</div>
</div>
<script type="module" src="./src/ani.js"></script>
<script src="./src/jquery-3.6.1.min.js"></script>
<script src="./src/popper.min.js"></script>
<script src="./src/tippy-bundle.iife.min.js"></script>
<script src="./src/vue.min.js"></script>
<script src="./src/main.js"></script>
</body>
</html>