نموذج التعليمات البرمجية لتنفيذ قائمة قرص العسل في HTML

 @keyframes _fade-in_mkmxd_1 {
    0% {
        عامل التصفية: طمس (20 بكسل)؛
        التعتيم: 0
    }
    ل {
        عامل التصفية: لا شيء؛
        التعتيم: 1
    }
}
@keyframes _drop-in_mkmxd_1 {
    0% {
        تحويل: فار (- تحويل) ترجمة Y (-100 بكسل) ترجمة Z (400 بكسل)
    }
    ل {
        تحويل: فار (- تحويل)
    }
}
._examples_mkmxd_3 {
    الهامش العلوي: 200 بكسل؛
    الموقف: نسبي؛
    العرض: 1000 بكسل؛
    الارتفاع: 640 بكسل؛
    الانتقال: تحويل .15s بسهولة؛
    عامل التصفية: الظل المسقط (0 4px 18px rgba(0,0,0,1));
    --عرض الشبكة: 140 بكسل؛
    اليسار: 50%؛
    تحويل: ترجمة (-50%، 0 بكسل)؛
}
._examples_mkmxd_3 شعبة {
    الموقف: نسبي؛
    الانتقال: مرشح .25s سهولة الخروج؛
    الرسوم المتحركة: _fade-in_mkmxd_1 .35s cube-bezier(.215,.61,.355,1) var(-delay) للخلف;
}
._examples_mkmxd_3 div:hover {
    عامل التصفية: الظل المسقط (0 4px 8px rgba(0,0,0,.4));
    مؤشر z: 3؛
}
._examples_mkmxd_3 أ {
    الموقف: مطلق؛
    --تحويل: منظور (75em) تدويرX(0deg) تدويرZ(-0deg) ترجمة(calc(var(--x) * 100%), calc(var(--y) * 86.67%))scale(1.145);
    تحويل: فار(-تحويل);
    الرسوم المتحركة: _drop-in_mkmxd_1 .35s cube-bezier(.215,.61,.355,1) var(-delay) للخلف;
    الانتقال: تحويل .25s بسهولة؛
    /*مسار المقطع: مضلع(50% 100%,93.3% 75%,93.3% 25%,50% 0%,6.7% 25%,6.7% 75%));*/
    /*مسار المقطع: مضلع(25% 93.3%,75% 93.3%,93.3% 50%,75% 6.7%,25% 6.7%,6.7% 50%));*/
    مسار المقطع: مضلع (25% 87%، 75% 87%، 98.3% 50%، 75% 13%، 25% 13%، 1.7% 50%)؛
}
._examples_mkmxd_3 أ:hover{
    تحويل: فار(-تحويل) ترجمةZ(10px) مقياس(1.1);
}
._examples_mkmxd_3 img {
    نسبة العرض إلى الارتفاع: 1؛
    ملاءمة الكائن: الغطاء؛
    الارتفاع: 64 بكسل؛
    العرض: 64 بكسل؛
    تحويل: ترجمة (-50%، 40 بكسل)؛
    اليسار: 50%؛
    الموقف: مطلق؛
    /*الفلتر: الظل المسقط(2px 2px 0px #00BFFF);*/
}
إم جي {
    أقصى عرض: 100%؛
    الارتفاع: تلقائي؛
    عرض: كتلة؛
}
*{
    تحجيم الصندوق: صندوق الحدود؛
}
.مربع القائمة{
    عرض: كتلة؛
    العرض: 200 بكسل؛
    الارتفاع: 200 بكسل؛
    /*الخلفية:rgba(84, 109, 231,.6);*/
    الخلفية: أرجواني متوسط؛
    الموقف: نسبي؛
}
نص القائمة {
    اللون: #ففف؛
    الموقف: مطلق! مهم؛
    أعلى: 120 بكسل؛
    اليسار: 50%؛
    وزن الخط: غامق؛
    تحويل: ترجمة (-50%، 0 بكسل)؛
    /*الفلتر: الظل المسقط(2px 2px 0px #00BFFF);*/
    حجم الخط: 16 بكسل؛
    محاذاة النص: مركز؛
}
.الخلفية-img{
    العرض: 64 بكسل! مهم؛
    الموقف: مطلق؛
    اليسار: 50%؛
    تحويل: ترجمة (-50%، 20 بكسل)؛
    /*الفلتر: الظل المسقط(2px 2px 0px #00BFFF);*/
}
أ:hover+.menu-box .menu-text{
    اللون: #00BFFF؛
    عامل التصفية: الظل المسقط (2px 2px 0px #fff) ؛
}

 <div class="_examples_mkmxd_3" >
    <div v-for="(item,index) in tempData" :key="index" :style="{'--delay': item.showTime}">
        <a href = "#" :title = "item.name" @mouseenter = "menuEnter (item)" @mouseleave = "menuLeave (item)" @click = "menuClick (item,tempData)" :style = "{' --x': item.x، '--y': item.y}">
            <span class="menu-box" :style="{'background':item.color}">
                <img v-if="item.name!=='上一层'" :src="item.imgPath?item.imgPath:'../img/navigation/火车站.png'" >
                <img v-if="item.imgPath&&item.name==='上一层'" :src="item.imgPath" class="back-img">
                <span class="menu-text">{{item.name}}</span>
            </span>
        </أ>
    </div>
</div>

 رؤية جديدة({
    إل:'#التطبيق'،
    بيانات(){
        يعود {
            بيانات القائمة:[
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[
                        {
                            x:0,y:0, المسار:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[
                                {
                                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]
                                },
                                {
                                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]
                                },
                            ]
                        },
                        {
                            x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
                        },
                        {
                            x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
                        },
                    ]
                },
                {
                    x:0,y:0, المسار:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'../img/navigation/火车站.png',أطفال:[]
                },
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
                },
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
                },
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]
                },
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]
                },
                {
                    x:0,y:0, المسار:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[]
                },
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
                },
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
                },
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]
                },
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]
                },
                {
                    x:0,y:0, المسار:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[]
                },
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
                },
                {
                    x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
                },
            ]،
            البيانات المؤقتة:[]،         
            الألوان:[
                '#1874CD'، '#3CB371'، '#FF7F50'، '#CD1076'، '#CD00CD'،
                '#1C86EE'، '#00FF7F'، '#FF8C00'، '#EE1289'، '#EE00EE'،
                '#1E90FF'، '#00FF00'، '#FFA500'، '#FF1493'، '#FF00FF'،
            ]
        }
    },
    يشاهد:{
        بيانات القائمة (){
            this.initCoor()
        }
    },
    شنت () {
        دع _هذا = هذا
        هذا.getUser()
        // هذا.getMenuData()
        this.tempData = this.menuData
        this.initCoor()
        this.timer = setInterval(function(){
            _this.localDate = _this.dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
        },1000)
    },
    دمرت (){
        كلير إنترفال(هذا.المؤقت)
    },
    طُرق:{
        القائمةأدخل (العنصر){
            إذا (item.name==='上一层')
                يعود
            this.msgData = item
            this.msgShow = صحيح
        },
        قائمة ترك (البند) {
            this.msgShow = false
        },           
        وقت العرض(العنصر){
            إذا (item.name==='上一层')
                إرجاع "0"
            إرجاع Math.random()+'s'
        },
        القائمة انقر (العنصر، بارانت) {
            دع آر =[]
            إذا(item.name==='上一层'){
                this.changeMenu(item.children)
            }آخر إذا(item.children.length>0){
                arr.push({x:0,y:0,path: ''',name:'上一层',imgPath:'../img/navigation/icon-返回上一级.png',children:parant} )
                item.children.forEach(t=>{
                    arr.push(ر)
                })
                this.changeMenu(arr)
            }آخر{
                window.location.href = item.path
            }
        },
        تغيير القائمة (البيانات) {
            دع _هذا = هذا
            this.tempData = []
            setTimeout(وظيفة(){
                _this.tempData = data
                _this.initCoor()
            },10)
        },
        initCoor(){
            this.tempData.forEach((t,index)=>{
                t.color = هذه.الألوان[فهرس]
                t.showTime = this.showTime(t)
                إذا (!ت.الأطفال){
                    ت.الأطفال = []
                }               
                إذا (الفهرس <5) {
                    تي = 0
                    tx=index*0.86
                    إذا(الفهرس%2!==0){
                        تاي += 0.5
                        // tx = (index-1)+0.8
                    }
                }آخر إذا(index>4&&index<10){
                    تي = 1
                    tx=(index-5)*0.86
                    إذا(الفهرس%2===0){
                        تاي += 0.5
                        // tx = (index-1)+0.8
                    }
                }آخر إذا(index>9&&index<15){
                    تي = 2
                    tx=(index-10)*0.86
                    إذا(الفهرس%2!==0){
                        تاي += 0.5
                        // tx = (index-1)+0.8
                    }
                }
            })
        },      
    }
})