实现上下左右键盘图案方向盘

最新推荐文章于 2025-02-24 16:35:15 发布

Fay away

最新推荐文章于 2025-02-24 16:35:15 发布

阅读量428

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_46700289/article/details/138718386

版权

先展示一下成果，整体是要的这个效果
在这里插入图片描述

第一步在src/views/components下新建文件 circle.vue

<template>
	<div class="home">
		<div class="control-c">
			
		<div class="control-left">
			<div class="cross-c">
				<div class="cross-item" @click="turnArround('up')">
					<div data-v-edfc5b8b="" class="arr arr-1"></div>
				</div>
				<div class="cross-item" @click="turnArround('right')">
					<div data-v-edfc5b8b="" class="arr arr-2"></div>
				</div>
				<div class="cross-item" @click="turnArround('left')">
					<div data-v-edfc5b8b="" class="arr arr-3"></div>
				</div>
				<div class="cross-item" @click="turnArround('down')">
					<div data-v-edfc5b8b="" class="arr arr-4"></div>
				</div>
			</div>
			<div class="center-btn"></div>
		</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'HelloWorld',
		components: {},
		data() {
			return {
				fileList: []
			}
		},
		created() {

		},
		methods: {
			turnArround(i) {
				//操作代码
				
			}
		}

	}
</script>

<style lang="scss" scoped>
.control-c {
		width: 102px;
		height: 102px;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
		background: linear-gradient(180deg, #2f2f30 0%, #1f1f1f 100%);
		// border: solid 2px #0a0a0a;
		.control-left{
		    width: 102px;
		    height: 102px;
		    border-radius: 50%;
		    position: relative;
		    overflow: hidden;
		    background: linear-gradient(180deg,#2f2f30 0%,#1f1f1f 100%);
		    border: solid 2px #0a0a0a;
			.cross-c{
			    width: 102px;
			    height: 102px;
			    display: flex;
			    flex-wrap: wrap;
			    transform: rotate(45deg);
			    position: absolute;
			    left: 50%;
			    top: 50%;
			    margin-left: -51px;
			    margin-top: -51px;
				.cross-item{
				    width: 51px;
				    height: 51px;
				    cursor: pointer;
				    position: relative;
				    border: 1px solid black;
					.arr{
					    width: 0;
					    height: 0;
					    border: solid 4px transparent;
					    border-bottom-color: #fff;
					    position: absolute;
					    top: 50%;
					    left: 50%;
					}
					.arr-1{
					    margin-top: -7px;
					    margin-left: -7px;
					    transform: rotate(-45deg);
					}
					.arr-2 {
					    margin-top: -8px;
					    margin-left: -4px;
					    transform: rotate(45deg);
					}
					.arr-3 {
					    margin-top: -3px;
					    margin-left: -7px;
					    transform: rotate(-135deg);
					}
					.arr-4 {
					    margin-top: -3px;
					    margin-left: -1px;
					    transform: rotate(135deg);
					}
				}
			}
			 .center-btn{
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    margin-top: -14px;
			    margin-left: -14px;
			    border-radius: 24px;
			    width: 28px;
			    height: 28px;
			    border: solid 2px #0a0a0a;
			    background: #0a0a0a;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			}
		}
	}

	
</style>

第二步直接引用注册

<template>
	<div class="org">	
	<Acircle/> 
	</div>
</template>
import Acircle from '你的路径'
	export default {
		components:{Acircle},
	}