123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197 |
- <!-- 基本注释的属性框 -->
- <!-- 基本图片的属性框 -->
- <template>
- <div class="base-image">
- <div class="title">属性</div>
- <ul>
- <li>
- <div class="small-title">尺寸大小</div>
- <div class="property">
- <div>
- <span>W</span>
- <el-input
- style="width:74px;margin-left:6px"
- size="mini"
- v-model="input"
- placeholder="请输入内容"
- ></el-input>
- </div>
- <div>
- <span>H</span>
- <el-input
- style="width:74px;margin-left:6px"
- size="mini"
- v-model="input"
- placeholder="请输入内容"
- ></el-input>
- </div>
- <i class="el-icon-link"></i>
- </div>
- </li>
- <li>
- <div class="small-title">填充</div>
- <div class="property property-push">
- <div class="color-box">
- <div class="cololorSelect">
- <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
- </div>
- <span>颜色</span>
- </div>
- </div>
- </li>
- <li>
- <div class="small-title">边框</div>
- <div class="property">
- <div class="color-box">
- <div class="cololorSelect">
- <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
- </div>
- <span>颜色</span>
- </div>
- <div class="line-width">
- <el-input-number
- style="width:80px"
- v-model="num"
- controls-position="right"
- @change="handleChange"
- size="mini"
- :min="1"
- :max="20"
- :maxlength="100"
- ></el-input-number>
- <span>线宽</span>
- </div>
- <div class="color-box">
- <div class="cololorSelect">
- <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
- </div>
- <span>背景颜色</span>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </template>
- <script>
- import bus from "@/bus/bus";
- // import { Select } from 'ant-design-vue';
- export default {
- // components:{Select},
- data() {
- return {
- size: 12, //font-size
- text: "", //文本
- color: "#cccccc", //颜色
- activeName: "",
- num: 1,
- borderLineOption: [
- {
- id: "solid",
- src: require("@/assets/images/solidLine.png"),
- },
- {
- id: "dashed",
- src: require("@/assets/images/dashedLine.png"),
- },
- {
- id: "dotted",
- src: require("@/assets/images/dotLine.png"),
- },
- ],
- borderStyle: "solid",
- };
- },
- methods: {
- // 改变文本大小
- updateSize(val) {
- bus.$emit("baseTextSize", val);
- },
- // 输入文本
- handleChangeText() {},
- handleChange() {},
- // 改变文字颜色
- changeColor() {},
- handleClick(tab, event) {
- console.log(tab, event);
- },
- changeBorder() {},
- },
- mounted() {
- // console.log(Select)
- },
- };
- </script>
- <style lang="less" scoped>
- ul,
- li {
- margin: 0;
- padding: 0;
- list-style-type: none;
- }
- .base-image {
- .title {
- height: 47px;
- border-bottom: 1px solid #979797;
- color: #646c73;
- font-size: 16px;
- padding-left: 12px;
- box-sizing: border-box;
- }
- ul {
- width: calc(~"100% - 24px");
- margin: -1px 12px 0 12px;
- li {
- border-top: 1px solid #979797;
- margin-bottom: 16px;
- .small-title {
- font-size: 12px;
- color: #8d9399;
- margin: 12px 0;
- }
- .property {
- display: flex;
- align-items: center;
- justify-content: space-around;
- .color-box {
- display: flex;
- align-items: center;
- flex-direction: column;
- .cololorSelect {
- width: 32px;
- height: 20px;
- overflow: hidden;
- position: relative;
- margin: 4px 0;
- .fix-box-1 {
- margin-top: -8px;
- margin-left: -8px;
- /deep/ .el-color-picker__trigger {
- width: 200px;
- height: 200px;
- }
- }
- }
- }
- .line-width {
- display: flex;
- align-items: center;
- flex-direction: column;
- margin-left: 8px;
- position: relative;
- }
- span {
- font-size: 12px;
- color: #1f2429;
- margin-top: 4px;
- }
- }
- .property-push{
- justify-content:start;
- .color-box{
- margin-left: 8px;
- }
- }
- }
- }
- }
- </style>
|