import styled from 'styled-components';
import { Layout as AntLayout } from 'antd';


const colors = ["#1890FF", "#9C7AFF", "#F15A5A", "#FAAD14", "#23CBB7"];
const bgs = [
  'https://cdn.ywwl.com/bps/ywyun/framework/293423423.jpg',
  'https://cdn.ywwl.com/bps/ywyun/framework/2349284231.png',
  'https://cdn.ywwl.com/bps/ywyun/framework/7682472394.jpg',
  'https://cdn.ywwl.com/bps/ywyun/framework/8290822.png'
]

interface ModuleItemCloudStyleProps {
  index: number;
}

export const ModuleListStyle = styled.div`
  padding: 0 20px;
  * {
    box-sizing:content-box;
  }
`;

export const ModuleItemRowStyle = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  min-height: 140px;
  margin-bottom: 12px;
`;

export const ModuleItemCloudStyle = styled.div`
  width: 150px;
  padding: 10px;
  p{
    width: 100%;
    height: 100%;
    background-image: url(${(props: ModuleItemCloudStyleProps) => bgs[props.index]});
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    border-radius: 8px;
    position: relative;
    margin: 0;
    overflow: hidden;
    &:before{
      content: " ";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 0;
    }
    span{
      width: 100%;
      height: 100%;
      font-size: 18px;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      color: white;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
`;

export const ModuleItemAPPListStyle = styled.div`
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
`;

export const ModuleItemAPPItemStyle = styled.div`
  padding: 10px;
  width: 260px;
  height: 120px;
`;
