web开发 PC管理端常用样式汇总 - 个人笔记

效果一，表单分段标题样式效果

效果：

代码：

          <div style="display: block;width:100%;">
            <div class="section-title">
              基本信息
            </div>
          </div>

.section-title{
  border-left: 4px solid #2483ff;
  color: #2483ff;
  padding: 0 10px;
  display: inline-block;
  margin-bottom:15px;
  background:linear-gradient(90deg,rgba(36,131,255,.1) 18.82%,rgba(36,131,255,.0001));
}

二、自定义按钮样式1

效果：

代码：

.button-style{
  border:1px solid black;
  width:100px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #06f;
  border-radius: 3px;
  padding: 0 16px;
  cursor: pointer;
  font-size: 14px;
  border-color: #06f;
  margin:30px 30px 0 0;
}
.button-style:hover{
  background-color:rgb(240,246,255);
}

			<div
        	 class="button-style"
              @click="buttonHandle('watch')"
            >修改密码</div>

三、查询栏折叠效果

效果图：

展开后：

折叠后：

放置按钮：

 <div class="page-container">
    <div class="flex-div">
      <el-button type="primary" :icon="flexIcon" class="flex-button" :title="flexTitle" @click="queryChange" />
    </div>
    <el-header :height="showQuery?'75px':'0'" class="query-header">  // 我的页面中查询栏是2行，高度为75px，请根据实际调整

      <el-collapse-transition>
        <div v-show="showQuery">
        xxxx 查询栏的控件

定义数据

      showQuery: true,
      flexTitle: '点击收起查询栏',
      flexIcon: 'el-icon-arrow-up',

按钮点击折叠事件:

  methods: {
    // 收缩、展示查询栏
    queryChange: function() {
      this.showQuery = !this.showQuery
      this.flexTitle = this.showQuery ? '点击收起查询栏' : '点击展开查询栏'
      this.flexIcon = this.showQuery ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
    },

样式:

.flex-div {
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  position: absolute;
  right: 10px;
  z-index: 1000;
  transition: 0.5s;
  position: absolute;
  top:0;
}
.flex-button {
  padding: 0;
  width: 36px;
  height: 36px;
  transition: 0.5s;
}
.flex-div:hover {
  background-color: rgba(167, 210, 255, 0.267);
  border-radius: 6px;
}
.query-header {
  transition: 0.5s;
}