
.state {
  /*滚动部分总外壳，默认加边框等基础属性，盒模型部分尺寸，每个单独定义*/
  width: 284px;
  height: 245px;
  border: #ddd solid 1px;
  overflow: hidden;
  font-size: 12px;
}

.state ul.tab {
  /*上部两个选择项的容器*/
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 100%;
}

.state ul.tab li {
  /*上部两个选项按钮*/
  position: relative;
  float: left;
  width: 49.8%;
  height: 35px;
  line-height: 35px;
  color: #333;
  text-align: center;
  font-size: 14px;
  background: #f5f5f5;
  border-bottom: #ddd solid 1px;
  cursor: pointer;
}

.state ul.tab li.li1.cur {
  /*上部按钮左边选中*/
  background: #fff;
  border-left: 0px !important;
  border-right: #ddd solid 1px !important;
  border-bottom: 0;
}

.state ul.tab li.li2.cur {
  /*上部按钮右边选中*/
  background: #fff;
  border-right: 0px !important;
  border-left: #ddd solid 1px !important;
  border-bottom: 0;
}

.state .tab-con {
  /*滚动中层框架宽度(默认宽度填满父窗口)*/
  display: block;
  width: 100%;
  overflow: hidden;
}

.state .tab-con.swiper-container {
  padding-top: 12px;
}

.state .tab-con table {
  /*中层框架中格式为表格的话，合并边框*/
  border-collapse: collapse;
}

.marquee {
  /*滚动内部容器（内部一般一个ul在滚动，但marquee只用作外观可以作为滚动处理的class名称，实际滚动逻辑使用on-marquee驱动）*/
  position: relative;
  width: 100%;
  overflow: hidden;
}

.marquee ul {
  /*通过外部容器判断内部ul宽度以及内边距*/
  width: 96%;
  padding: 5px 2%;
}
.marquee ul.swiper-slide {
  /*通过外部容器判断内部ul宽度以及内边距*/
  padding: 0 2%;
}
.marquee ul li {
  /*容器内单个li的参数，宽度与边距通过百分比设定*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  display: inline-block;
  *display: inline;
  *zoom: 1;
  float: left !important;
  height: 20px;
  width: 96%;
  padding: 4px 2% 4px 2%;
  line-height: 20px;
}

.marquee ul li:hover {
  /*鼠标移入单个li时，背景变灰*/
  background: #f7f8fb;
}

/*                           ///////////////////(li内常用标签通用属性*默认*)//////////////////                        */
.marquee ul li span {
  /*li内通用span样式（不包含盒模型尺寸，如需要可以按照具体class重写）*/
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #333;
}

.marquee ul li a {
  /*li内通用a样式*/
  color: #333;
}

.marquee ul li a:hover {
  /*li内通用a鼠标移入样式*/
  color: #2fb4ff;
}

.marquee ul li div {
  display: inline-block;
}

/*        END    END       ///////////////////(li内常用标签通用属性*默认*)//////////////////        END    END        */

/*(以下为li内细分标签属性*通过标签classname判断，多为首页部分特需，此部分由于通过类名判断，不推荐覆盖，覆盖需要用到important*)*/

.marquee ul li span.name {
  /*class包含name的span的样式，下同规则*/
  display: inline-block;
  width: auto;
  max-width: 215px;
}

.marquee ul li span.service {
  margin-left: 5px;
  max-width: 90px;
  color: #999;
}

.marquee ul li span.price-ask {
  float: right;
  margin-right: 5px;
}

.marquee ul li span.time {
  position: absolute;
  right: 12px;
  margin-left: 5px;
  color: #999;
}
