From c9570001ad913c37e161618c99ce2f194298ae3a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 07 Mar 2022 10:15:11 +0800
Subject: [PATCH] 删除注释
---
src/components/mobileActivity/index.vue | 954 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 478 insertions(+), 476 deletions(-)
diff --git a/src/components/mobileActivity/index.vue b/src/components/mobileActivity/index.vue
index c367f2f..6a38840 100644
--- a/src/components/mobileActivity/index.vue
+++ b/src/components/mobileActivity/index.vue
@@ -1,509 +1,511 @@
<template>
- <div
- id="mobileActivity"
- :style="{ height: height + 'px' }"
- :class="[openValue ? 'isOpens' : 'notOpens']"
- v-if="showActivity"
- >
- <div class="mobileActivity_heard">
- <div class="mobileActivity_title">活动标题：{{ hdTitle }}</div>
- <div class="mobileActivity_close" @click="closeActivity">
- <i class="el-icon-close"></i>
- </div>
- </div>
- <div class="mobileActivity_in">
- <!-- <el-button type="primary" @click="init">open</el-button>
- <el-button type="success" @click="closeInit">close</el-button> -->
- <div class="mobileActivity_insmall">
- <!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
- <el-image
- class="mobileActivity_insmallimg"
- :src="useData.url"
- :preview-src-list="useData.srcList"
- ></el-image>
- <div class="mobileActivity_insmallxiangqing">
- <div
- class="mobileActivity_insmallxiangqingIn"
- v-for="(item, index) in useData.smallData"
- :key="index"
- >
- <span class="mobileActivity_insmallxiangqingIn_s">{{
- item.lable
- }}</span
- >: {{ item.value }}
- </div>
+ <div
+ id="mobileActivity"
+ :style="{ height: height + 'px' }"
+ :class="[openValue ? 'isOpens' : 'notOpens']"
+ v-if="showActivity"
+ >
+ <div class="mobileActivity_heard">
+ <div class="mobileActivity_title">活动标题：{{ hdTitle }}</div>
+ <div class="mobileActivity_close" @click="closeActivity">
+ <i class="el-icon-close"></i>
+ </div>
</div>
- </div>
- <div class="mobileActivity_detailed">
- <div
- class="mobileActivity_detailedIn"
- v-for="(item, index) in useData.detailedData"
- :key="index"
- >
- <span class="mobileActivity_insmallxiangqingIn_s">{{
- item.lable
- }}</span
- >: {{ item.value }}
+ <div class="mobileActivity_in">
+ <!-- <el-button type="primary" @click="init">open</el-button>
+ <el-button type="success" @click="closeInit">close</el-button>-->
+ <div class="mobileActivity_insmall">
+ <!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
+ <el-image
+ class="mobileActivity_insmallimg"
+ :src="useData.url"
+ :preview-src-list="useData.srcList"
+ ></el-image>
+ <div class="mobileActivity_insmallxiangqing">
+ <div
+ class="mobileActivity_insmallxiangqingIn"
+ v-for="(item, index) in useData.smallData"
+ :key="index"
+ >
+ <span class="mobileActivity_insmallxiangqingIn_s">
+ {{
+ item.lable
+ }}
+ </span>
+ : {{ item.value }}
+ </div>
+ </div>
+ </div>
+ <div class="mobileActivity_detailed">
+ <div
+ class="mobileActivity_detailedIn"
+ v-for="(item, index) in useData.detailedData"
+ :key="index"
+ >
+ <span class="mobileActivity_insmallxiangqingIn_s">
+ {{
+ item.lable
+ }}
+ </span>
+ : {{ item.value }}
+ </div>
+ </div>
</div>
- </div>
+ <div class="mobileActivity_coutrol" :style="{ bottom: bottom + 'px' }">
+ <ul>
+ <li
+ v-for="(item, index) in leftNavData"
+ :key="index"
+ @click="mobileActivityCoutrolClick(item)"
+ v-show="!item.notShow"
+ >
+ <img :src="item.img" alt />
+ <span>{{ item.label }}</span>
+ </li>
+ </ul>
+ </div>
</div>
- <div class="mobileActivity_coutrol" :style="{ bottom: bottom + 'px' }">
- <ul>
- <li
- v-for="(item, index) in leftNavData"
- :key="index"
- @click="mobileActivityCoutrolClick(item)"
- v-show="!item.notShow"
- >
- <img :src="item.img" alt="" />
- <span>{{ item.label }}</span>
- </li>
- </ul>
- </div>
- </div>
</template>
<script>
-import { mapGetters } from "vuex";
-import moveWindow from "./move";
+import { mapGetters } from 'vuex'
+import moveWindow from './move'
export default {
- name: "mobileActivity",
- computed: {
- ...mapGetters([
- "showActivity",
- "showActivityData",
- "drawALineLayerMany",
- "drawAPointLayerMany",
- ]),
- },
- data() {
- let heig = 135;
- let bottom = 150;
- return {
- useHeight: heig,
- height: heig,
- useBottom: bottom,
- bottom: bottom,
- openValue: false,
- domMove: null,
- start: 0,
- end: 0,
- hdTitle: "",
- // url: "",
- // srcList: [],
- useData: {},
- leftNavData: [
- {
- flag: true,
- label: "线路",
- // img: "/img/leftnav/tag.png",
- img: "/img/leftnav/tag-checked.png",
- normal: "/img/leftnav/tag.png",
- checked: "/img/leftnav/tag-checked.png",
- layer: "tagLayer",
- imgSrc: "https://map.hit.edu.cn/images/tarrow_xq.png",
- // imgSrc: "img/mobile/pink.png",
- layer: "drawALineLayerMany",
- },
- {
- flag: true,
- label: "标点",
- img: "/img/leftnav/way-checked.png",
- normal: "/img/leftnav/way.png",
- checked: "/img/leftnav/way-checked.png",
- layer: "wayLayer",
- imgSrc: "img/mobile/green.png",
- layer: "drawAPointLayerMany",
- },
- // {
- // flag: false,
- // label: "实景",
- // img: "/img/leftnav/scene.png",
- // normal: "/img/leftnav/scene.png",
- // checked: "/img/leftnav/scene-checked.png",
- // layer: "sceneLayer",
- // imgSrc: "img/leftnav/map-panorama.png",
- // // imgSrc: "img/mobile/blue.png",
- // },
- ],
- };
- },
- watch: {
- // openValue() {
- // if (this.openValue) {
- // let windowHeight = document.body.clientHeight;
- // this.height = windowHeight / 2;
- // } else {
- // this.height = this.useHeight;
- // }
- // },
- showActivity() {
- if (this.showActivity) {
- this.inToInit(); //初始化
- this.hdTitle = this.showActivityData.name;
-
- console.log(this.showActivityData);
- //new窗口对象
- let that = this;
- let windowHeight = document.body.clientHeight;
- this.doData(this.showActivityData); //使用数据
- // 获取最大高度避免数据过少，空格多
- // let heard = document.querySelector(".mobileActivity_heard");
- // let ins = document.querySelector(".mobileActivity_in");
- // console.log(heard, ins, 77777);
- this.checkDom("querySelector", ".mobileActivity_heard", (head) => {
- this.checkDom("querySelector", ".mobileActivity_in", (ins) => {
- console.log((head.offsetHeight + ins.offsetHeight) / 4);
- doit(head.offsetHeight + ins.offsetHeight);
- });
- });
- // return;
- let doit = (maxheights) => {
- this.domMove = new moveWindow({
- id: "mobileActivity",
- minHeight: that.useHeight,
- maxHeight: maxheights || windowHeight / 2,
- critical: maxheights / 4,
- fn: function (res) {
- that.height = +res.height;
- that.bottom = +res.height + 15;
- // console.log(+res.height, "=======");
- if (res.state != "on") {
- that.openValue = res.state;
- }
- },
- });
- this.domMove.init();
- // console.log(this.domMove);
- //转移···添加点和线
- let addressOur = this.changeData(
- this.useData.query,
- "addressname",
- "address"
- );
- let lxOur = this.changeData(this.useData.query, "lxname", "lx");
- // console.log(addressOur, lxOur);
- that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
- lxOur,
- addressOur,
- this.useData.query,
- function () {
- that.domMove.opens(false, true);
- },
- ]);
- };
- }
+ name: 'mobileActivity',
+ computed: {
+ ...mapGetters([
+ 'showActivity',
+ 'showActivityData',
+ 'drawALineLayerMany',
+ 'drawAPointLayerMany'
+ ])
},
- },
- mounted() {},
- methods: {
- inToInit() {
- //初始化
- this.openValue = false;
- this.height = this.useHeight;
- this.bottom = this.useBottom;
- for (let k in this.leftNavData) {
- this.leftNavData[k].flag = true;
- this.leftNavData[k].img = this.leftNavData[k].checked;
- }
- },
- //处理主数据
- doData(val) {
- let srcList = val.opendata.tpurl.split(",");
- this.useData = {
- data: val,
- url: srcList[0],
- srcList: srcList,
- smallData: [
- {
- lable: "主办方",
- value: val.opendata.sponsor,
- },
- {
- lable: "承办方",
- value: val.opendata.undertake,
- },
- ],
- detailedData: [
- {
- lable: "活动时间",
- value: val.opendata.time,
- },
- {
- lable: "活动详情",
- value: val.opendata.context,
- },
- ],
- query: {
- name: val.opendata.hdname,
- bgImg: val.opendata.tpurl,
- from: "活动",
- websiteUrl: val.opendata.websiteurl,
- telePhone: val.opendata.telephone,
- introduce: val.opendata.context,
- video: val.opendata.videourl,
- // buts: ["定位"],
- //活动添加的字段
- addressname: val.opendata.addressname.split(";"),
- address: val.opendata.address.split(";"),
- lxname: val.opendata.lxname.split(";"),
- lx: val.opendata.lx.split(";"),
- lntLat: [
- val.opendata.address.split(";")[0].split(",")[0],
- val.opendata.address.split(";")[0].split(",")[1],
- ],
- panoramaurl: val.opendata.panoramaurl, //全景
- },
- };
- },
- //启动监听事件
- init() {
- this.domMove.init();
- },
- //关闭监听事件
- closeInit() {
- this.domMove.closeInit();
- },
- //控制线路和点的显影
- mobileActivityCoutrolClick(item) {
- item.flag = !item.flag;
- if (item.flag == true) {
- item.img = item.checked;
- } else {
- item.img = item.normal;
- }
- this.$store.commit("showLineOrPoint", {
- layer: item.layer,
- flag: item.flag,
- });
- },
- changeData(data, name, value) {
- let arr = [];
- for (let k in data[name]) {
- arr.push({
- name: data[name][k],
- value:
- name == "lxname"
- ? data[value][k]
- .split("(")[1]
- .split(")")[0]
- .split(",")
- .join(";")
- .split(" ")
- .join(",")
- : [+data[value][k].split(",")[0], +data[value][k].split(",")[1]],
- });
- }
- return arr;
- },
- closeActivity() {
- this.$store.commit("set_showActivity", { state: false });
- if (this.domMove) {
- this.closeInit();
- }
- //关闭路线和点的图层
- this.$store.commit("removePolylineMany");
- //关闭随地图弹窗
- this.$store.dispatch("closeMobileWindowsDom");
- //显示右侧栏
- this.$store.commit("SET_SeeAndNotSee", true);
- },
- checkDom(methods, name, fn) {
- // 声明定时器
- var timer = null;
- // 检查dom是否执行完成
- function checkDom() {
- // let dom = that.$refs[name];
- let dom = document[methods](name);
- if (dom) {
- // 执行dom加载完成后的操作
- // 清除定时器
- if (!timer) {
- clearTimeout(timer);
- }
- if (fn) {
- //回调函数
- fn(dom);
- return;
- } else {
- return dom;
- }
- } else {
- // 自我调用
- timer = setTimeout(checkDom, 100);
+ data () {
+ const heig = 135
+ const bottom = 150
+ return {
+ useHeight: heig,
+ height: heig,
+ useBottom: bottom,
+ bottom: bottom,
+ openValue: false,
+ domMove: null,
+ start: 0,
+ end: 0,
+ hdTitle: '',
+ // url: "",
+ // srcList: [],
+ useData: {},
+ leftNavData: [
+ {
+ flag: true,
+ label: '线路',
+ // img: "/img/leftnav/tag.png",
+ img: '/img/leftnav/tag-checked.png',
+ normal: '/img/leftnav/tag.png',
+ checked: '/img/leftnav/tag-checked.png',
+ layer: 'tagLayer',
+ imgSrc: 'https://map.hit.edu.cn/images/tarrow_xq.png',
+ // imgSrc: "img/mobile/pink.png",
+ layer: 'drawALineLayerMany'
+ },
+ {
+ flag: true,
+ label: '标点',
+ img: '/img/leftnav/way-checked.png',
+ normal: '/img/leftnav/way.png',
+ checked: '/img/leftnav/way-checked.png',
+ layer: 'wayLayer',
+ imgSrc: 'img/mobile/green.png',
+ layer: 'drawAPointLayerMany'
+ }
+ // {
+ // flag: false,
+ // label: "实景",
+ // img: "/img/leftnav/scene.png",
+ // normal: "/img/leftnav/scene.png",
+ // checked: "/img/leftnav/scene-checked.png",
+ // layer: "sceneLayer",
+ // imgSrc: "img/leftnav/map-panorama.png",
+ // // imgSrc: "img/mobile/blue.png",
+ // },
+ ]
}
- }
- // 首次执行
- checkDom();
},
- },
-};
+ watch: {
+ // openValue() {
+ // if (this.openValue) {
+ // let windowHeight = document.body.clientHeight;
+ // this.height = windowHeight / 2;
+ // } else {
+ // this.height = this.useHeight;
+ // }
+ // },
+ showActivity () {
+ if (this.showActivity) {
+ this.inToInit() // 初始化
+ this.hdTitle = this.showActivityData.name
+
+ // new窗口对象
+ const that = this
+ const windowHeight = document.body.clientHeight
+ this.doData(this.showActivityData) // 使用数据
+ // 获取最大高度避免数据过少，空格多
+ // let heard = document.querySelector(".mobileActivity_heard");
+ // let ins = document.querySelector(".mobileActivity_in");
+ // console.log(heard, ins, 77777);
+ this.checkDom('querySelector', '.mobileActivity_heard', (head) => {
+ this.checkDom('querySelector', '.mobileActivity_in', (ins) => {
+ console.log((head.offsetHeight + ins.offsetHeight) / 4)
+ doit(head.offsetHeight + ins.offsetHeight)
+ })
+ })
+ // return;
+ const doit = (maxheights) => {
+ this.domMove = new moveWindow({
+ id: 'mobileActivity',
+ minHeight: that.useHeight,
+ maxHeight: maxheights || windowHeight / 2,
+ critical: maxheights / 4,
+ fn: function (res) {
+ that.height = +res.height
+ that.bottom = +res.height + 15
+ // console.log(+res.height, "=======");
+ if (res.state != 'on') {
+ that.openValue = res.state
+ }
+ }
+ })
+ this.domMove.init()
+ // console.log(this.domMove);
+ // 转移···添加点和线
+ const addressOur = this.changeData(
+ this.useData.query,
+ 'addressname',
+ 'address'
+ )
+ const lxOur = this.changeData(this.useData.query, 'lxname', 'lx')
+ // console.log(addressOur, lxOur);
+ that.$store.dispatch('MSET_DRAWALINELAYERMANY', [
+ lxOur,
+ addressOur,
+ this.useData.query,
+ function () {
+ that.domMove.opens(false, true)
+ }
+ ])
+ }
+ }
+ }
+ },
+ mounted () { },
+ methods: {
+ inToInit () {
+ // 初始化
+ this.openValue = false
+ this.height = this.useHeight
+ this.bottom = this.useBottom
+ for (const k in this.leftNavData) {
+ this.leftNavData[k].flag = true
+ this.leftNavData[k].img = this.leftNavData[k].checked
+ }
+ },
+ // 处理主数据
+ doData (val) {
+ const srcList = val.opendata.tpurl.split(',')
+ this.useData = {
+ data: val,
+ url: srcList[0],
+ srcList: srcList,
+ smallData: [
+ {
+ lable: '主办方',
+ value: val.opendata.sponsor
+ },
+ {
+ lable: '承办方',
+ value: val.opendata.undertake
+ }
+ ],
+ detailedData: [
+ {
+ lable: '活动时间',
+ value: val.opendata.time
+ },
+ {
+ lable: '活动详情',
+ value: val.opendata.context
+ }
+ ],
+ query: {
+ name: val.opendata.hdname,
+ bgImg: val.opendata.tpurl,
+ from: '活动',
+ websiteUrl: val.opendata.websiteurl,
+ telePhone: val.opendata.telephone,
+ introduce: val.opendata.context,
+ video: val.opendata.videourl,
+ // buts: ["定位"],
+ // 活动添加的字段
+ addressname: val.opendata.addressname.split(';'),
+ address: val.opendata.address.split(';'),
+ lxname: val.opendata.lxname.split(';'),
+ lx: val.opendata.lx.split(';'),
+ lntLat: [
+ val.opendata.address.split(';')[0].split(',')[0],
+ val.opendata.address.split(';')[0].split(',')[1]
+ ],
+ panoramaurl: val.opendata.panoramaurl // 全景
+ }
+ }
+ },
+ // 启动监听事件
+ init () {
+ this.domMove.init()
+ },
+ // 关闭监听事件
+ closeInit () {
+ this.domMove.closeInit()
+ },
+ // 控制线路和点的显影
+ mobileActivityCoutrolClick (item) {
+ item.flag = !item.flag
+ if (item.flag == true) {
+ item.img = item.checked
+ } else {
+ item.img = item.normal
+ }
+ this.$store.commit('showLineOrPoint', {
+ layer: item.layer,
+ flag: item.flag
+ })
+ },
+ changeData (data, name, value) {
+ const arr = []
+ for (const k in data[name]) {
+ arr.push({
+ name: data[name][k],
+ value:
+ name == 'lxname'
+ ? data[value][k]
+ .split('(')[1]
+ .split(')')[0]
+ .split(',')
+ .join(';')
+ .split(' ')
+ .join(',')
+ : [+data[value][k].split(',')[0], +data[value][k].split(',')[1]]
+ })
+ }
+ return arr
+ },
+ closeActivity () {
+ this.$store.commit('set_showActivity', { state: false })
+ if (this.domMove) {
+ this.closeInit()
+ }
+ // 关闭路线和点的图层
+ this.$store.commit('removePolylineMany')
+ // 关闭随地图弹窗
+ this.$store.dispatch('closeMobileWindowsDom')
+ // 显示右侧栏
+ this.$store.commit('SET_SeeAndNotSee', true)
+ },
+ checkDom (methods, name, fn) {
+ // 声明定时器
+ var timer = null
+ // 检查dom是否执行完成
+ function checkDom () {
+ // let dom = that.$refs[name];
+ const dom = document[methods](name)
+ if (dom) {
+ // 执行dom加载完成后的操作
+ // 清除定时器
+ if (!timer) {
+ clearTimeout(timer)
+ }
+ if (fn) {
+ // 回调函数
+ fn(dom)
+ } else {
+ return dom
+ }
+ } else {
+ // 自我调用
+ timer = setTimeout(checkDom, 100)
+ }
+ }
+ // 首次执行
+ checkDom()
+ }
+ }
+}
</script>
<style lang="scss">
#mobileActivity {
- position: fixed;
- bottom: 0px;
- left: 0px;
- width: 100%;
- // height: 50px;
- background-color: #fff;
- z-index: 999;
- transition: height 0.1s;
- border-radius: 15px 15px 0 0;
- .mobileActivity_heard {
- height: 35px;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+ // height: 50px;
+ background-color: #fff;
+ z-index: 999;
+ transition: height 0.1s;
border-radius: 15px 15px 0 0;
- width: 100%;
- background-color: #409eff;
- color: #fff;
- border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
- box-shadow: 0 0px 10px -3px rgba($color: #acacac, $alpha: 0.5);
- .mobileActivity_title {
- width: 100%;
- height: 100%;
- line-height: 35px;
- text-indent: 1rem;
- }
- .mobileActivity_close {
- position: absolute;
- right: 5px;
- top: 5px;
- font-size: 25px;
- }
- }
- .mobileActivity_in {
- width: 100%;
- height: auto;
- overflow: hidden;
- padding-bottom: 5px;
- .mobileActivity_insmall {
- background-color: #fff;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-around;
- .mobileActivity_insmallimg {
- width: 90px;
- height: 90px;
- }
- .mobileActivity_insmallxiangqing {
- width: calc(100% - 110px);
- height: 94px;
- display: flex;
- align-items: center;
- justify-content: space-around;
- flex-direction: column;
- .mobileActivity_insmallxiangqingIn {
- width: 100%;
- }
- }
- }
- .mobileActivity_detailed {
- background-color: rgba(202, 202, 202, 0.2);
- padding: 3px 0 0 0;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- .mobileActivity_detailedIn {
- background-color: #fff;
- box-sizing: border-box;
+ .mobileActivity_heard {
+ height: 35px;
+ border-radius: 15px 15px 0 0;
width: 100%;
- padding: 5px;
- margin: 0 0 3px 0;
- }
+ background-color: #409eff;
+ color: #fff;
+ border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
+ box-shadow: 0 0px 10px -3px rgba($color: #acacac, $alpha: 0.5);
+ .mobileActivity_title {
+ width: 100%;
+ height: 100%;
+ line-height: 35px;
+ text-indent: 1rem;
+ }
+ .mobileActivity_close {
+ position: absolute;
+ right: 5px;
+ top: 5px;
+ font-size: 25px;
+ }
}
- .mobileActivity_insmallxiangqingIn_s {
- font-weight: 600;
+ .mobileActivity_in {
+ width: 100%;
+ height: auto;
+ overflow: hidden;
+ padding-bottom: 5px;
+ .mobileActivity_insmall {
+ background-color: #fff;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ .mobileActivity_insmallimg {
+ width: 90px;
+ height: 90px;
+ }
+ .mobileActivity_insmallxiangqing {
+ width: calc(100% - 110px);
+ height: 94px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ flex-direction: column;
+ .mobileActivity_insmallxiangqingIn {
+ width: 100%;
+ }
+ }
+ }
+ .mobileActivity_detailed {
+ background-color: rgba(202, 202, 202, 0.2);
+ padding: 3px 0 0 0;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ .mobileActivity_detailedIn {
+ background-color: #fff;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 5px;
+ margin: 0 0 3px 0;
+ }
+ }
+ .mobileActivity_insmallxiangqingIn_s {
+ font-weight: 600;
+ }
}
- }
}
.notOpens {
- &::after {
- content: "";
- display: block;
- width: 20px;
- height: 4px;
- background-color: rgba(202, 202, 202, 1);
- position: absolute;
- top: -9px;
- left: calc(50% - 10px);
- border-radius: 5px;
- }
+ &::after {
+ content: '';
+ display: block;
+ width: 20px;
+ height: 4px;
+ background-color: rgba(202, 202, 202, 1);
+ position: absolute;
+ top: -9px;
+ left: calc(50% - 10px);
+ border-radius: 5px;
+ }
}
.isOpens {
- &::after {
- content: "";
- display: block;
- width: 13px;
- height: 4px;
- background-color: rgba(202, 202, 202, 1);
- position: absolute;
- top: -9px;
- left: calc(50% - 12px);
- border-radius: 5px;
- transform: rotate(30deg);
- }
- &::before {
- content: "";
- display: block;
- width: 13px;
- height: 4px;
- background-color: rgba(202, 202, 202, 1);
- position: absolute;
- top: -9px;
- left: calc(50% - 4px);
- border-radius: 5px;
- transform: rotate(-30deg);
- }
+ &::after {
+ content: '';
+ display: block;
+ width: 13px;
+ height: 4px;
+ background-color: rgba(202, 202, 202, 1);
+ position: absolute;
+ top: -9px;
+ left: calc(50% - 12px);
+ border-radius: 5px;
+ transform: rotate(30deg);
+ }
+ &::before {
+ content: '';
+ display: block;
+ width: 13px;
+ height: 4px;
+ background-color: rgba(202, 202, 202, 1);
+ position: absolute;
+ top: -9px;
+ left: calc(50% - 4px);
+ border-radius: 5px;
+ transform: rotate(-30deg);
+ }
}
.mobileActivity_coutrol {
- position: fixed;
- bottom: 150px;
- left: 0px;
- z-index: 200;
- background-color: #fff;
- border-radius: 0 17px 17px 0;
- transition: all 0.18s;
- ul {
- position: relative;
- top: 3px;
- }
- li {
- margin-bottom: 6px;
- font-weight: 400;
- display: block;
- width: 80px;
- height: 30px;
- line-height: 30px;
+ position: fixed;
+ bottom: 150px;
+ left: 0px;
+ z-index: 200;
background-color: #fff;
- border-radius: 15px;
- text-align: center;
- font-size: 0;
- cursor: pointer;
-
- img {
- position: relative;
- transition: all 0.5s;
- width: 24px;
- height: 24px;
- vertical-align: middle;
- margin-right: 10px;
- image-rendering: -moz-crisp-edges;
- image-rendering: -o-crisp-edges;
- image-rendering: -webkit-optimize-contrast;
- image-rendering: crisp-edges;
- -ms-interpolation-mode: nearest-neighbor;
+ border-radius: 0 17px 17px 0;
+ transition: all 0.18s;
+ ul {
+ position: relative;
+ top: 3px;
}
+ li {
+ margin-bottom: 6px;
+ font-weight: 400;
+ display: block;
+ width: 80px;
+ height: 30px;
+ line-height: 30px;
+ background-color: #fff;
+ border-radius: 15px;
+ text-align: center;
+ font-size: 0;
+ cursor: pointer;
- span {
- display: inline-block;
- vertical-align: middle;
- font-size: 14px;
- color: #2f2f2f;
+ img {
+ position: relative;
+ transition: all 0.5s;
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
+ margin-right: 10px;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: -o-crisp-edges;
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: crisp-edges;
+ -ms-interpolation-mode: nearest-neighbor;
+ }
+
+ span {
+ display: inline-block;
+ vertical-align: middle;
+ font-size: 14px;
+ color: #2f2f2f;
+ }
}
- }
}
</style>
--
Gitblit v1.9.3