数据服务中心平台首页旋转菜单html页面源码

mazai5080

已于 2022-04-21 23:49:12 修改

阅读量755

点赞数

分类专栏：前端源码文章标签： javascript vue.js 经验分享

于 2022-04-21 23:47:12 首次发布

本文链接：https://blog.csdn.net/mazai5080/article/details/124334887

版权

前端源码专栏收录该内容

102 篇文章 25 订阅

订阅专栏

大家好，今天给大家介绍一款，数据服务中心平台首页旋转菜单html页面源码（图1）。送给大家哦，获取方式在本文末尾。

图1

鼠标点击相应菜单，就会有旋转效果，看起来很有科技感（图2）

图2

本模板编码：10137，需要的朋友，关注文章末尾公众号，搜索10137，即可获取。

部分源码：

<!--<!DOCTYPE html>-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>-->
    <title>数据服务中心</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/css/font_3045003_lkxtjaj4m6.css">
    <link rel="stylesheet" href="static/css/rotation3D.css">
    <style>
        body{
            background-color: #292a38;
        }
        .rotation3D-baseMap{
            position: absolute; left: 10px; right: 0; top: 160px; margin: auto;
            width: 1312px; height: 516px;
            background: url("static/image/baseMap.png");
        }
        .rotation3D-baseMap::before{
            position: absolute; left: -12px; right: 0; top: 0; margin: auto; z-index: 99;
            width: 342px; height: 318px; display: block; content: '';
            background: url("static/image/baseLogo.png");
            animation: 10s bounceUpDown infinite;
        }
    </style>
</head>
<body>
<div id="app" style="padding: 50px;" v-cloak="">
    <!--底座-->
    <div class="rotation3D-baseMap"></div>
    <!--旋转3D-->
    <div id="rotation3D" class="rotation3D">
        <button class="center">中心</button>
        <div class="itemList">
            <div class="rotation3D__item" :class="item.type" v-for="item in itemList">
                <div class="scale">
                    <div class="baseImg"></div>
                    <div class="cont">
                        <i class="iconfont" :class="item.icon"></i>
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="lineList">
            <div class="rotation3D__line" v-for="item in itemList" :class="item.type">
                <div v-if="item.type=='blue'" class="pos">
                    <svg width="10" height="400">
                        <path id="path1" d="M0 400, 0 0" stroke-dasharray="5,10"></path>
                    </svg>
                    <div class="dot dot1 el-icon-caret-right"></div>
                </div>
                <div v-if="item.type=='yellow'" class="pos">
                    <svg width="10" height="400">
                        <path id="path2" d="M0 400, 0 0" stroke-dasharray="5,10"></path>
                    </svg>
                    <div class="dot dot2"><i class="el-icon-close"></i></div>
                </div>
                <div v-if="item.type=='green'" class="pos" style="left: -16px;">
                    <svg width="50" height="400">
                        <path id="path3" d="M20 400 S 0 200, 20 0" stroke-dasharray="5,10"></path>
                        <path id="path4" d="M20 400 S 40 200, 20 0" stroke-dasharray="5,10"></path>
                    </svg>
                    <div class="dot dot3 el-icon-caret-right"></div>
                    <div class="dot dot4 el-icon-caret-right"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="static/js/jquery-1.10.2.js"></script>
<script src="static/js/vue2.6.10.min.js"></script>
<script src="static/js/rotation3D.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        //数据
        data: {
            itemList: [
                { name:'人员管理', type:'blue', icon:'icon-renyuanguanli', },
                { name:'GPS服务', type:'green', icon:'icon-GPS', },
                { name:'路基施工', type:'yellow', icon:'icon-a-lujishigong2x', },
                { name:'数据服务中心', type:'blue', icon:'icon-shujufuwuzhongxin', },
                { name:'智慧梁场', type:'blue', icon:'icon-liangchang', },
                { name:'摊铺压实服务', type:'blue', icon:'icon-tanpuyashifuwu', },
                { name:'路面施工', type:'blue', icon:'icon-lumianshigong', },
                { name:'试验检测', type:'blue', icon:'icon-shiyanjiance', },
            ],
        },
        mounted: function () {
            new Rotation3D({
                id: '#rotation3D',
                farScale: 0.6,
                // farScale: 1,
                xRadius: 0,  //x半径压缩
                yRadius: 220,  //y半径压缩
                // yRadius: 0,  //y半径压缩
                // autoPlay:true,
                // autoPlayDelay:6000,
            })

        },
        methods: {},
    });
</script>
</html>