修改bug
This commit is contained in:
		
							
								
								
									
										148
									
								
								src/views/copilot/factoryData/components/chartButton.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										148
									
								
								src/views/copilot/factoryData/components/chartButton.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,148 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-06-07 08:37:17
 | 
			
		||||
 * @LastEditTime: 2024-06-07 11:04:41
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <button
 | 
			
		||||
    class="chart-btn"
 | 
			
		||||
    :class="[active ? 'active' : '']"
 | 
			
		||||
    @click="$emit('click', label)"
 | 
			
		||||
  >
 | 
			
		||||
    {{ label }}
 | 
			
		||||
  </button>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
  name: "CopilotButton",
 | 
			
		||||
  props: {
 | 
			
		||||
    label: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      required: true,
 | 
			
		||||
    },
 | 
			
		||||
    active: {
 | 
			
		||||
      type: Boolean,
 | 
			
		||||
      default: false,
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
button {
 | 
			
		||||
  appearance: none;
 | 
			
		||||
  outline: none;
 | 
			
		||||
  border: none;
 | 
			
		||||
  background: none;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
.skate {
 | 
			
		||||
  /* flex: 1; */
 | 
			
		||||
  position: relative;
 | 
			
		||||
  width: 88px;
 | 
			
		||||
  height: 32px;
 | 
			
		||||
  background: #01306C;
 | 
			
		||||
  /* border-radius: 4px 0px 0px 4px; */
 | 
			
		||||
  backdrop-filter: blur(3px);
 | 
			
		||||
  /* text-align: center;
 | 
			
		||||
  padding: 12px;
 | 
			
		||||
  padding-left: 20px;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
  font-size: 18px; */
 | 
			
		||||
  font-family: PingFangSC, PingFang SC;
 | 
			
		||||
  font-weight: 400;
 | 
			
		||||
  font-size: 12px;
 | 
			
		||||
  color: #FFFFFF;
 | 
			
		||||
  line-height: 22px;
 | 
			
		||||
  letter-spacing: 5px;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  font-style: normal;
 | 
			
		||||
  /* margin-right: 1px; */
 | 
			
		||||
  /* letter-spacing: 10px; */
 | 
			
		||||
  cursor: pointer;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.chart-btn:nth-child(6)::after {
 | 
			
		||||
  content: '';
 | 
			
		||||
  width: 0;
 | 
			
		||||
  height: 0;
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
.chart-btn {
 | 
			
		||||
  /* flex: 1; */
 | 
			
		||||
  position: relative;
 | 
			
		||||
  width: 88px;
 | 
			
		||||
  height: 32px;
 | 
			
		||||
  background: #01306C;
 | 
			
		||||
  /* border-radius: 4px 0px 0px 4px; */
 | 
			
		||||
  backdrop-filter: blur(3px);
 | 
			
		||||
  /* text-align: center;
 | 
			
		||||
  padding: 12px;
 | 
			
		||||
  padding-left: 20px;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
  font-size: 18px; */
 | 
			
		||||
  font-family: PingFangSC, PingFang SC;
 | 
			
		||||
  font-weight: 400;
 | 
			
		||||
  font-size: 12px;
 | 
			
		||||
  color: #FFFFFF;
 | 
			
		||||
  line-height: 22px;
 | 
			
		||||
  letter-spacing: 5px;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  font-style: normal;
 | 
			
		||||
  /* margin-right: 1px; */
 | 
			
		||||
  /* letter-spacing: 10px; */
 | 
			
		||||
  cursor: pointer;
 | 
			
		||||
}
 | 
			
		||||
.chart-btn::after {
 | 
			
		||||
  /* flex: 1; */
 | 
			
		||||
  /* position: relative; */
 | 
			
		||||
  content: "";
 | 
			
		||||
  position: absolute;
 | 
			
		||||
    /* width: 16px; */
 | 
			
		||||
    /* height: 16px; */
 | 
			
		||||
  top: px;
 | 
			
		||||
  right: -1px;
 | 
			
		||||
  width: 1px;
 | 
			
		||||
  height: 23px;
 | 
			
		||||
  border: 1px solid #010D18;
 | 
			
		||||
}
 | 
			
		||||
.chart-btn.active {
 | 
			
		||||
  background: #1D74D8;
 | 
			
		||||
  /* border-radius: 4px;; */
 | 
			
		||||
}
 | 
			
		||||
.chart-btn.active::after {
 | 
			
		||||
  display: none;
 | 
			
		||||
  /* border-radius: 4px;; */
 | 
			
		||||
}
 | 
			
		||||
/* .copilot-btn::before,
 | 
			
		||||
.copilot-btn::after {
 | 
			
		||||
  content: "";
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  width: 16px;
 | 
			
		||||
  height: 16px;
 | 
			
		||||
  top: 0;
 | 
			
		||||
  background: transparent;
 | 
			
		||||
  border-style: solid;
 | 
			
		||||
  border-width: 2px;
 | 
			
		||||
  border-color: transparent;
 | 
			
		||||
  border-top-color: #007be4;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.copilot-btn::before {
 | 
			
		||||
  left: 0;
 | 
			
		||||
  border-left-color: #007be4;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.copilot-btn::after {
 | 
			
		||||
  right: 0;
 | 
			
		||||
  border-right-color: #007be4;
 | 
			
		||||
} */
 | 
			
		||||
</style>
 | 
			
		||||
		Reference in New Issue
	
	Block a user