panel: {
type: Array,
default: [ {img:'pics-gem/1.png',title:'一月石榴石'},
{img:'pics-gem/2.png',title:'一月石榴石'},
{img:'pics-gem/3.png',title:'一月石榴石'},
{img:'pics-gem/4.png',title:'一月石榴石'},
{img:'pics-gem/5.png',title:'一月石榴石'},
{img:'pics-gem/6.png',title:'一月石榴石'},
{img:'pics-gem/7.png',title:'一月石榴石'},
{img:'pics-gem/8.png',title:'一月石榴石'},
{img:'pics-gem/9.png',title:'一月石榴石'},
{img:'pics-gem/10.png',title:'一月石榴石'},
{img:'pics-gem/11.png',title:'一月石榴石'},
{img:'pics-gem/12.png',title:'一月石榴石'},] },
},
activated(){
this.initPanel()
},
methods: {
// 操作版
clickPanel(item){
this.$emit('clickPanel',{item})
},
initPanel(){
let panel=document.getElementById("cn-wrapper");
let panelMan = new Hammer.Manager(panel);
panelMan.add(new Hammer.Pan({
threshold: 0
}));
panelMan.on('panstart', (ev) => {
if (ev.center.x < panel.clientWidth/2) {//左边
this.rotatePanel= this.rotatePanel - ev.angle
}else{
this.rotatePanel= this.rotatePanel + ev.angle
}
});
}
}
}
</script>
<style scoped>
.cn-wrapper {
font-size: 1em;
width: 24em;
height: 24em;
overflow: hidden;
position: fixed;
z-index: 10;
bottom: 84px;
margin-left: -288px;
left: 50%;
border-radius: 50%;
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(1);
/* pointer-events: none; */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
overflow: hidden;
left: 50%;
/* top: 50%; */
margin-top: -2em;
/* border: solid 1px #f2cc81; */
margin-left: -10em;
-webkit-transition: border 0.3s ease;
-moz-transition: border 0.3s ease;
transition: border 0.3s ease;
}
.cn-wrapper li a {
display: block;
font-size: 1.18em;
height: 14.5em;
width: 14.5em;
/* position: absolute; */
position: fixed; /* fix the "displacement" bug in webkit browsers when using tab key */
bottom: -7.25em;
right: -7.25em;
border-radius: 50%;
text-decoration: none;
color: #fff;
padding-top: 1em;
text-align: center;
-webkit-transform: skew(-60deg) rotate(-70deg) scale(1);
