123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- <template>
- <div class="change-div" id="change-div">
- <div class="change-container-div">
- <div class="layer-select-button-div" id="layer-select-button-div" @click="basemapShow = !basemapShow">
- <i class="fa fa-map-o" aria-hidden="true" v-if="!basemapShow"></i>
- <i class="fa fa-map" aria-hidden="true" v-if="basemapShow"></i>
- </div>
- <div class="info-select-button-div" id="info-select-button-div" @click="infomapShow = !infomapShow">
- <i class="fa fa-commenting-o" aria-hidden="true" v-if="!infomapShow"></i>
- <i class="fa fa-commenting" aria-hidden="true" v-if="infomapShow"></i>
- </div>
- </div>
- <div class='basemap-content' id="basemap-content" v-show="basemapShow">
- <el-checkbox-group
- :min="1"
- v-model="checkMapList"
- @change="checkedMapsChange"
- >
- <el-checkbox label="cdut">文化地图</el-checkbox>
- <el-checkbox label="tiandi">在线地图</el-checkbox>
- </el-checkbox-group>
- </div>
- <div class='info-content' id="info-content" v-show="infomapShow">
- <el-checkbox-group v-model="checkTagList" @change="checkedTagsChange">
- <el-checkbox label="noticeLayer">最新通知</el-checkbox>
- <el-checkbox label="reportLayer">实时新闻</el-checkbox>
- <el-checkbox label="cultureLayer" disabled>校园文化</el-checkbox>
- <el-checkbox label="otherLayer" >更多</el-checkbox>
- </el-checkbox-group>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'LayerSelector',
- data: () => ({
- // 底图控件 可见性
- basemapShow: false,
- // 信息控件 可见性
- infomapShow: false,
- // checkMapList: ['文化地图', '在线地图'],
- checkMapList: ['cdut', 'tiandi'],
- checkTagList: ['noticeLayer', 'reportLayer', 'cultureLayer', 'otherLayer']
- }),
- watch: {
- basemapShow: function () {
- if (this.basemapShow) {
- this.infomapShow = false
- }
- },
- infomapShow: function () {
- if (this.infomapShow) {
- this.basemapShow = false
- }
- }
- },
- methods: {
- checkedMapsChange () {
- this.$emit('getCheckedMap', this.checkMapList)
- },
- checkedTagsChange () {
- this.$emit('getCheckedTag', this.checkTagList)
- }
- }
- }
- </script>
- <style scoped>
- .basemap-item {
- padding: 5px;
- cursor: pointer;
- }
- .basemap-text,.online-map-text{
- width: 60px;
- height: 12px;
- }
- .basemap-text{
- /* color: #007bff; */
- /* color: rgb(115, 172,23); */
- font-weight: bold;
- font-family: "Source Han Sans CN";
- }
- /*图层与消息按钮样式*/
- .info-select-button {
- width: 22px;
- height: 20px;
- }
- .info-select-button-div {
- width: 22px;
- height: 22px;
- z-index: 999;
- cursor: pointer;
- position: absolute;
- }
- .layer-select-button {
- width: 22px;
- height: 22px;
- }
- .layer-select-button-div {
- width: 22px;
- height: 22px;
- z-index: 999;
- right: 3px;
- cursor: pointer;
- position: absolute;
- }
- .change-container-div {
- height:20px;
- width: 55px;
- margin: auto;
- position: absolute;
- top: 0;
- left: 3px;
- bottom: 5px;
- right: 0;
- }
- .change-div {
- background-color:transparent;
- width:65px;
- height: 35px;
- z-index: 999;
- position: absolute;
- right: 10px;
- border-radius: 5px;
- margin-top: 10px
- }
- /*图层切换弹出框 和 消息选择弹出框 样式*/
- #basemap-content, .info-content {
- position: absolute;
- font-size: 12px;
- z-index: 100;
- background: rgb(219, 236, 224);
- /* color: rgb(115, 172,23); */
- opacity: 0.95;
- right: 0px;
- margin-top: 40px;
- height: 65px;
- width:100px;
- align-content: center;
- margin-top: 35px
- }
- .info-content {
- height: 130px;
- /* color: rgb(115, 172,23); */
- }
- /*设置选项样式*/
- /deep/ .el-checkbox {
- left:10px;
- top:8px;
- }
- /deep/ .el-checkbox__label {
- font-family: "Source Han Sans CN";
- color: #212529;
- }
- </style>
|