vue基础样式应用

用于记录自己经常用到的一些样式
1、文本溢出隐藏

<template slot-scope="scope">
	<div class="text-hidden">{
  { scope.row.address }}</div>
</template>

.text-hidden{
   
 overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

overflow: hidden;
text-weight: ellipsis;
white-space: normal;
word-break: break-all;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

2.大的外边框，类似卡片的样式

.shopcheck {
   
  border: 1px solid #999;
  margin: 20px;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 2px 4px 6px #999;
  background-color: #fff;
}

3、详情普通表格

<el-dialog title="店铺发布详情" :visible.sync="dialogVisible" width="50%">
      <div class="table-d">
        <table border="0" cellspacing="1" cellpadding="0">
          <tr>
            <td style="width: 100px">店铺名</td>
            <td>{
  { pub_shop.shop_name }}</td>
          </tr>
          <tr>
            <td style="width: 100px">店铺联系方式</td>
            <td>{
  { pub_shop.shop_mobile }}</td>
          </tr>
          <tr>
            <td style="width: 100px">文章标题</td>
            <td>{
  { msg.title }}</td>
          </tr>
          <tr>
            <td>类型</td>
            <td>{
  { msg.type }}</td>
          </tr>
          <tr