如何在互联网推广自己的产品_广告公司岗位_常见的搜索引擎_网络宣传推广

<template><div class="comparison_box"><div class="comparison_left"><div class="system_list"><ul><liv-for="(item, index) in systemList":key="index":class="{ li_active: index === selectVal }"@click="selectSystem(index)"><span>{{ item.name }}</span></li></ul></div></div><div ref="comparisonRight" class="comparison_right" @scroll="handleScroll"><!-- 顶部固定列 --><div class="comparison_top"><div class="comparison_top_title"><el-popoverref="popover"placement="bottom"width="400"trigger="click"@show="selectBoxVal=''"><el-select v-model="selectBoxVal" filterable placeholder="请选择" @change="bacthChange"><el-optionv-for="item in comboxList":key="item.value":label="`${item.value}（${item.name}）`":value="item.value"></el-option></el-select><el-button slot="reference" icon="el-icon-plus"></el-button></el-popover><div class="text">添加对比</div></div><div class="comparison_top_list"><draggable :list="navList" class="drag-area" @end="onDragEnd"><divv-for="(item, index) in navList":key="index"class="list_details":class="{ list_details_active: index === 0 && isDing }"><div class="fixed_tag"><spanv-if="index === 0 && isDing"class="tag_close"@click="cancelDing(index)">已钉住</span><span v-else class="tag" @click="dingHandle(index)">钉在左侧</span><iv-if="navList.length > 1"class="el-icon-close"@click="moveItemUp(index)"></i></div><div class="craft_name">{{ item.name }}</div></div></draggable></div></div><div ref="scrollContainer" class="table_list"><divv-for="(item, index) in systemList":ref="'anchor-' + index":key="index"class="panel-item anchor-item"><div class="panel-item-title"><div class="title" :style="{borderRight: navList.length>0?'':'1px solid #2c91ff'}">{{ item.name }}</div><div class="panel-item_list"><divv-for="(list, i) in navList":key="i"class="list_item":class="{ list_item_active: i === 0 && isDing }"></div></div></div><div v-for="(main, j) in item.list" :key="j" class="nav_box"><div class="nav_left"><div>{{ main.title }}</div></div><div class="nav_right"><divv-for="(nav, idx) in navList":key="idx"class="nav_list":class="{ nav_list_active: idx === 0 && isDing }">{{ nav[main.id] }}</div></div></div></div></div><!-- 返回顶部 --><div v-if="showBackTop" class="back_top"><el-buttontype="primary"icon="el-icon-caret-top"circle@click="scrollToTop"></el-button></div></div></div>
</template><script>
import draggable from 'vuedraggable'
export default {components: {draggable},data () {return {input3: '',selectVal: 0,selectBoxVal: '',popVis: false,showBackTop: false, // 是否显示返回顶部isDing: false, // 是否钉住systemList: [{name: '车型1',list: [{id: 'xitong1',title: '转动轴1'},{id: 'xitong2',title: '转动轴2'},{id: 'xitong3',title: '转动轴3'},{id: 'xitong4',title: '转动轴4'},{id: 'xitong5',title: '转动轴5'},{id: 'xitong6',title: '转动轴6'}]},{ name: '车型2' },{ name: '车型3' },{ name: '车型4' },{ name: '车型5' },{ name: '车型6' },{ name: '车型7' },{ name: '车型8' },{ name: '车型9' },{ name: '车型10' },{ name: '车型11' }],navList: [{name: '工艺参数1',xitong1: '10',xitong2: '65',xitong3: '1',xitong4: '30',xitong6: '40',xitong5: '50'},],comboxList: [{value: '111',name: '车型'}]}},mounted () {this.initPkData()},methods: {dingHandle (index) {this.isDing = truethis.navList.splice(0, 0, this.navList.splice(index, 1)[0])},cancelDing () {this.isDing = false},onDragEnd (event) {// 拖拽结束后的处理逻辑},selectSystem (val) {this.$nextTick(() => {this.selectVal = valconst selector = 'anchor-' + valthis.$refs[selector][0].scrollIntoView({ behavior: 'instant', block: 'end', inline: 'nearest' }) })},scrollToTop () {this.$nextTick(() => {this.selectSystem(0)})},moveItemUp (index) {this.navList.splice(index, 1)},plusClick() {this.$refs.popover.doShow()},initPkData() {this.navList = []//初始化systemList comboxList数据},bacthChange(val) {if (val) {this.$refs.popover.doClose()//组装navList数据}}}
}
</script><style lang="scss" scoped>
.comparison_box {display: flex;width: 100%;height: calc(100vh - 320px);.comparison_left {width: 140px;height: 100%;background:  #173a5e;border-radius: 5px;flex-shrink: 0;overflow: hidden;.system_list {height: calc(100% - 40px);ul {height: 100%;overflow: auto;padding: 0 8px;li {list-style: none;padding: 8px 6px 8px 12px;font-size: 14px;border-radius: 6px;cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;background:linear-gradient(10deg, #021E3A 0%, #094AA4 50%, #021E3A 100%);color: #FFFFFF;&:hover {background: #1359b9;}}li+li{margin-top: 10px;}.li_active {color: #F5A623;background: #1359b9}}}}.comparison_right {background:  #173a5e;width: calc(100% - 140px);margin-left: 12px;overflow: auto;color:#FFFFFF;.comparison_top {height: 100px;position: sticky;top: 0;z-index: 10;background:  #173a5e;display: flex;.comparison_top_title {width: 160px;height: 100%;border: 1px solid #2c91ff;position: sticky;left: 0;flex-shrink: 0;background:  #173a5e;z-index: 8;display: flex;flex-direction: column;align-items: center;justify-content: center;.text {font-size: 12px;margin-top: 4px;}}.comparison_top_list {display: flex;.drag-area {display: flex;}.list_details {width: 200px;height: 100%;border: 1px solid #2c91ff;border-left: none;background:  #173a5e;position: relative;.fixed_tag {display: flex;justify-content: space-between;.tag {background-color: rgba(255, 204, 50, 0.7);border-bottom-right-radius: 24px;padding: 4px 20px 4px 6px;font-size: 12px;color: rgb(17, 15, 10);cursor: pointer;}.tag_close {background-color: #919193;border-bottom-right-radius: 24px;padding: 4px 20px 4px 6px;color: rgba(31, 33, 41);font-size: 12px;cursor: pointer;}> i {font-size: 12px;color: #FFFFFF;margin-right: 4px;margin-top: 4px;cursor: pointer;}}.craft_name {margin-top: 16px;text-align: center;font-size: 14px;font-weight: 600;}}.list_details_active {position: sticky;left: 160px;z-index: 6;}}}.table_list {height: 100%;.panel-item {display: flex;flex-direction: column;margin-top: 1px;.panel-item-title {height: 36px;display: flex;align-items: center;.title {width: 144px;height: 100%;line-height: 36px;position: sticky;left: 0;padding-left: 16px;font-size: 14px;font-weight: 600;background: #185c9e;color:#F5A623;border-bottom: 1px solid #2c91ff;border-left: 1px solid #2c91ff;flex-shrink: 0;}.panel-item_list {height: 100%;display: flex;.list_item {width: 201px;height: 100%;background: #185c9e;border-bottom: 1px solid #2c91ff;}.list_item:last-child {border-right: 1px solid #2c91ff;}.list_item_active {position: sticky;left: 160px;}}}.nav_box {display: flex;height: 32px;.nav_left {height: 100%;position: sticky;left: 0;border: 1px solid #2c91ff;border-top: none;width: 144px;line-height: 32px;padding-left: 16px;color: #FFFFFF;flex-shrink: 0;z-index: 8;font-size: 14px;}.nav_right {display: flex;height: 100%;.nav_list {width: 184px;height: 100%;flex-shrink: 0;border: 1px solid #2c91ff;border-top: none;border-left: none;line-height: 32px;padding-left: 16px;font-size: 14px;}.nav_list_active {position: sticky;left: 160px;}}}}}.back_top {position: fixed;bottom: 50px;right: 60px;}}
}
</style>